How to setup Ziggy on Laravel/Inertija/Vite/Vue

The official Ziggy documentation is very detailed and covers many situations. But, it can be tough to find the exact help you need for your own setup. Here is the setup if you are on a fresh Laravel 9 application together with Vite, Vue, Intertija. Roadmap:

1. Install composer package
2. Add @routes helper in your blade.
3. Add ziggy-js alias
4. Load ZiggyVue
5. Celebrate

Let’s go into details:

Install composer Package

Install like this (no npm package or anything else required):

composer require tightenco/ziggy

Add @routes helper

Add ziggy-js alias

Add a ziggy-js in your vite.config.js:

Here the code from the screenshot for copy & paste:

resolve: {
    alias: {
        'ziggy-js': path.resolve('vendor/tightenco/ziggy/dist/vue.es.js'),
    }
},

Import ZiggyVue

Add .use(ZiggyVue) to your VueApp constant in you app.js

And that is the entire setup. You can use “route” helper anywhere within your Vue components, without importing it.

Also be aware, there is no need to run `php artisan ziggy:generate` in setup.