Laravel + vue + Inertia

Как настроить vue в ларавел вместе с Inertia

Для использования вместе с ларавел vue необходима Inertia https://inertiajs.com/server-side-setup

1. Создаем новый проект

composer create-project laravel/laravel . 10

2. Устанавливаем Inertia

composer require inertiajs/inertia-laravel

3. Публикуем middleware

php artisan inertia:middleware

Появился файл app/Http/Middleware/HandleInertiaRequests.php

4. Привязать HandleInertiaRequests к web роутам, для этого в файле app/Http/Kernel.php добавить middleware:

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\HandleInertiaRequests::class,

5. Создать файл resources/views/app.blade.php со следующим содержанием:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

6. В файле resources/js/app.js должно быть так:

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

7. Установить зависимости

npm install @inertiajs/vue3

8. Файл vite.config.js должен выглядеть так:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

9 В файле routes/web.php создаем такой роут:

use Inertia\Inertia;

Route::get('/test-vue', function () {
    return Inertia::render('Test',['data'=>'data']);
});

10. Установить плагин (--force если не устанавливается)

npm install @vitejs/plugin-vue --force

Примечание: начал потом устанавливать primevue, то же начались проблемы. Установил npm i @vitejs/plugin-vue@4 ыва установилось без проблем и primevue тоже установился. Видимо для ларавел 10 нужен плагин 4 версии.

11. Создать папку resources/js/Pages , здесь будут файлы с расширением vue, которые будут как шаблоны блэйд. И вызываются они так: Inertia::render('Test'); Т.е. название файла без .vue

12. Создать файл resources/js/Pages/Test.vue

<template>
    <h1>Test vue in laravel</h1>
</template>

13. Запустить

npm run dev

14. Загрузить страницу в браузере