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

Dr. Adam Nielsen
2 min readNov 14


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

<!DOCTYPE html>
<html class="h-full bg-white">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite(['resources/assets/css/tailwindcore.css', 'resources/assets/js/tailwind-colorful/dashboard/app.js'])
<body class="h-full">

Add ziggy-js alias

First, this is how the vite.config.js should look like:

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
resolve: {
alias: {
'ziggy-js': path.resolve('vendor/tightenco/ziggy/dist/'),
plugins: [
input: [
// react(),
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,

Import ZiggyVue

This is my app.js:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import UserMaster from './Layout/UserMaster.vue';
import AdminMaster from './Layout/AdminMaster.vue';
import { ZiggyVue } from 'ziggy-js';

resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
const page = pages[`./Pages/${name}.vue`];
const Layout = name.startsWith('AdminDashboard') ? AdminMaster : UserMaster;
page.default.layout = page.default.layout || Layout;
return page;

setup({ el, App, props, plugin }) {
const VueApp = createApp({ render: () => h(App, props) })

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.



Dr. Adam Nielsen

PHD in math. and Laravel / Vue Full-Stack-Developer