Setup Ziggy with Inertia and Vue

@Sinnbeck can you please share a code snippet of how I can implement this?

@jeroenvanrensen sorry I don't use vue. Just read it at that post. I think the guide in the other answer is a good idea if you just install the npm package

@Sinnbeck I'm surprised you're not using Vue, what's your stack? (just confused)

@Nakov hello, I followed the exact steps but I got this error:

Module not found: Error: Can't resolve 'ziggy'

@jeroenvanrensen install this https://www.npmjs.com/package/ziggy-js

@CamKem Yes, please.

@CamKem It is generally better to create your own thread. If it takes 10 answers to fix your problem, we are spamming the original author with 10 emails, when their problem was already solved. Secondly, most people will ignore solved threads.

@CamKem The problem is that you need to run a command in order to generate a file called ziggy.js

php artisan ziggy:generate

this file needs to be imported in the app.js of the inertia app.

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

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import { Ziggy } from './ziggy'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

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

InertiaProgress.init({ color: '#4B5563' });

So you basically need to generate this file anytime you register a new route, you can automate this process using vite by adding the following piece of code to the vite.config.js file

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        {
            name: 'ziggy',
            enforce: 'post',
            handleHotUpdate({ server, file }) {
                if (file.includes('/routes/') && file.endsWith('.php')) {
                    exec('php artisan ziggy:generate', (error, stdout) => error === null && console.log(`  > Ziggy routes generated!`))
                }
        }
    },
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

This way you will have your ziggy.js file generated automatically when runing npm run dev