Предполагается что вы уже умеете настраивать окружение для запуска проектов Laravel. Я работаю c Vagrant+Homestead на windows 11.
Шаг 1 - Устанавливаем Laravel
Через composer:
composer create-project --prefer-dist laravel/laravel my-laravel-app
Через установщик Laravel
composer global require laravel/installer
laravel new my-laravel-app
Which starter kit would you like to install? None
Which testing framework do you prefer? По желанию.
Which database will your application use? По желанию
Default database updated. Would you like to run the default database migrations? No
Would you like to run npm install and npm run build? No
Шаг 2 - Настраиваем окружение
cd my-laravel-app
Добавляем настройки для доступа к Базе данных в .env
файл .env в папке проекта Laravel
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=my_laravel_app
DB_USERNAME=homestead
DB_PASSWORD=secret
Шаг 3 - Устанавливаем Vue 3 и Vite
npm install
npm install vue@latest vue-router@latest @vitejs/plugin-vue
Настраиваем Vite для Vue
Изменяем файл vite.config.js в папке проекта Laravel
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
server: {
hmr: {
host: '192.168.10.10',
},
host: "192.168.10.10",
watch: {
usePolling: true,
},
},
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
vue(),
],
});
Секция настроек Server добавлена для работы npm run dev, так как сервер vite запускается не на локальной машине, в виртуальной машине Homestead.
Настраиваем Vue в Laravel
Изменяем файл resources/js/app.js
import './bootstrap';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import App from './components/App.vue';
import router from './router/index.js';
createApp({}).use(router).mount('#app');
Создаем два Vue компонента
создаем папку components в resources/js/
создаем файл resources/js/components/Home.vue
<template>
<div>
<h2>This is the Home Page</h2>
</div>
</template>
создаем resources/js/components/About.vue
<template>
<div>
<h2>This is the About Page</h2>
</div>
</template>
Настраиваем Vue Router
устанавливаем Vue Router
npm install vue-router@latest
создаем папку resources/js/router/
создаем файл resources/js/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
так же необходимо настроить маршруты Laravel файл routes/web.php
Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');
Изменяем шаблон Blade
файл resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 12 with Vue 3</title>
@vite(['resources/js/app.js'])
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</body>
</html>
Шаг 4 - Запускаем приложение
Собираем приложение Vue
npm run build
или запускаем сервер Vite в режиме разработки
npm run dev