Utilizar rotas do Laravel no Vue

Para poder usar as rotas do Laravel no Vue, vamos utilizar o pacote

Começamos por instalar o pacote:

composer require tightenco/ziggy

Referência: https://github.com/tighten/ziggy

Inclua as rotas no seu ficheiro app.blade.php, logo antes da inclusão do Javascript:

    @routes
    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
        @vite(['resources/js/app.js'])
    @endif
    @inertiaHead
</head>

Lembre-se de recompilar os seus assets com npm run dev ou npm run build.

Vamos adicionar um alias para o path do plugin

No ficheiro vite.config.js:

// vite.config.js
import path from 'path';
(...)
export default defineConfig({
   plugins: [
      ...
   ],
   resolve: {
      alias: {
         'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
      },
   },
});

Para o Vue, utilize o plugin Vue disponível.

Referência: https://github.com/tighten/ziggy?tab=readme-ov-file#vue

No ficheiro /resources/js/app.js, inclua:

import { ZiggyVue } from 'ziggy-js';
(...)
createApp(App).
    (...)
    .use(ZiggyVue)

O ficheiro final, app.js ficará desta forma:

import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from 'ziggy-js';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            // Inertia plugin
            .use(plugin)
            // Ziggy plugin
            .use(ZiggyVue)
            // Mount the app
            .mount(el)
    },
})