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

Dr. Adam Nielsen
2 min readNov 14, 2023

The good thing about the Ziggy documentation in the repo, is that its very detailed and tries to cover all scenarios.
The downside of this documentation, is that is hard to find the right instructions for your specific environment.

Here is the setup if you 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.

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` as descriped in the docs.

--

--