В этой статье вы узнаете как установить Vue 3 в Laravel 10 + Vite и как использовать его на примере простого приложения. Предполагается что вы уже умеете настраивать окружение для запуска проектов Laravel.
К концу статьи в сможете создать приложение Vue 3 Laravel 10 с vite. Так же узнаете как создать vue3 компонент и подключить его к blade шаблону laravel 10.
Для установки необходимо выполнить следующие шаги:
- Установить приложение laravel 10
- Установить NPM.
- Установить Vue 3.
- Добавляем Vue в vite.config.js
- Устанавливаем laravel/breeze
- Создаём приложение Vue 3
- Создаем компонент Vue 3
- Подключаем Компонент Vue 3 в файле Laravel blade.
- Собираем приложение
1. Установить приложение laravel 10
composer create-project laravel/laravel vue3app
2. Установить NPM
cd vue3app
npm install
3. Установить Vue 3
npm i @vitejs/plugin-vue
4. Добавляем Vue в vite.config.js
В Laravel 10 больше нет webpack.mix.js в корневой директории, а на его месте появился vite.config.js.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
5. Устанавливаем require laravel/breeze
Laravel Breeze — это минимальная и простая реализация всех функций аутентификации Laravel , включая вход в систему, регистрацию, сброс пароля, проверку электронной почты и подтверждение пароля. Кроме того, Breeze включает простую страницу «профиля», где пользователь может обновить свое имя, адрес электронной почты и пароль.
Слой представления Laravel Breeze по умолчанию состоит из простых шаблонов Blade , стилизованных с помощью Tailwind CSS .
composer require laravel/breeze --dev
php artisan breeze:install
Which Breeze stack would you like to install?
› ● Blade
○ React with Inertia
○ Vue with Inertia
○ API only
php artisan migrate
npm install
npm run dev
6. Создаем приложение Vue 3
В resources/js/app.js создадим экземпляр vue 3. Добавляем следующий код:
import { createApp } from 'vue/dist/vue.esm-bundler';
import HelloVue from './components/HelloVue.vue';
const app = createApp({
components: {
'hello-vue' : HelloVue,
}
});
app.mount('#app');
7. Создаем компонент Vue 3
Для этого создадим в каталоге ./resources/js/ каталог Components, а в нем файл HelloVue.vue. Код в файле:
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
name: "HelloVue"
}
</script>
<style scoped>
</style>
8. Подключаем Компонент Vue 3 в файле Laravel blade
Так как у нас установлен Laravel Breeze мы имеем начальный набор шаблонов Blade. В каталоге ./resources/views/layouts/ находим файл app.blade.php добавляем в него в секцию <HEAD> директиву @vite(['resources/css/app.css', 'resources/js/app.js']).
Директива @vite автоматически обнаружит сервер разработки Vite и внедрит клиент Vite. В режиме сборки директива загрузит ваши скомпилированные активы, включая любой импортированный CSS.
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
Отображать компонент будем после авторизации на странице Dashboard в каталоге ./resources/views/ файл dashboard.blade.php
x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">
<div id="app">
<hello-vue></hello-vue>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
9. Соберем приложение
npm run dev
Авторизуемся в нашем Laravel приложении попадаем на страницу Dashboard видим наше Vue 3 приложение:
