JavaScript Frameworks

Using Ziggy with modern JavaScript frameworks without the @routes directive

Overview

Many applications don’t need additional setup beyond the @routes Blade directive. However, if you prefer to avoid using @routes or are working in a build-tool environment, you can import Ziggy’s route() function and configuration directly into your JavaScript/TypeScript files.

This approach is ideal for:

• Single-page applications (SPAs)
• Applications with separate frontend and backend repositories
• Projects that prefer explicit imports over global variables
• Build processes that benefit from tree-shaking

Generating Ziggy’s Configuration

Ziggy provides an Artisan command to output your routes configuration to a file:

php artisan ziggy:generate

By default, this creates resources/js/ziggy.js. You can customize the output path:

# Custom path
php artisan ziggy:generate resources/js/routes.js

# Or configure in config/ziggy.php
return [
    'output' => [
        'path' => 'resources/js/routes.js',
    ],
];

The generated file exports a Ziggy configuration object:

// resources/js/ziggy.js

const Ziggy = {
    url: 'https://ziggy.test',
    port: null,
    defaults: {},
    routes: {
        home: {
            uri: '/',
            methods: ['GET', 'HEAD'],
            domain: null,
        },
        'posts.index': {
            uri: 'posts',
            methods: ['GET', 'HEAD'],
            domain: null,
        },
        'posts.show': {
            uri: 'posts/{post}',
            methods: ['GET', 'HEAD'],
            parameters: ['post'],
            bindings: {
                post: 'id',
            },
        },
    },
};

export { Ziggy };

Importing the route() Function

Without the @routes directive, you need to import the route() function and pass the Ziggy config manually.

Direct Import from Vendor

You can import directly from the vendor directory:

import { route } from '../../vendor/tightenco/ziggy';
import { Ziggy } from './ziggy.js';

// Pass Ziggy as the fourth argument
const url = route('posts.show', { post: 1 }, undefined, Ziggy);

Setting Up an Alias

Create an alias in your build configuration to simplify imports:

Vite

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
    resolve: {
        alias: {
            'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
        },
    },
});

Webpack

// webpack.config.js
const path = require('path');

module.exports = {
    resolve: {
        alias: {
            'ziggy-js': path.resolve(__dirname, 'vendor/tightenco/ziggy'),
        },
    },
};

Laravel Mix

// webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
    resolve: {
        alias: {
            'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
        },
    },
});

Now you can import Ziggy with a clean import path:

import { route } from 'ziggy-js';
import { Ziggy } from './ziggy.js';

route('posts.index', undefined, undefined, Ziggy);

Using the NPM Package

For SPAs or separate repositories without a vendor directory, install Ziggy from NPM:

npm install ziggy-js

Then import it directly:

import { route } from 'ziggy-js';
import { Ziggy } from './ziggy.js';

route('posts.index', undefined, undefined, Ziggy);

You’ll need to make your generated ziggy.js file available to your frontend, either by:

• Running php artisan ziggy:generate and copying the file to your frontend project
• Creating an API endpoint that returns Ziggy’s config as JSON (see below)

Retrieving Config from an API

For fully separate frontend applications, you can fetch Ziggy’s config over the network:

// routes/api.php
use Tighten\Ziggy\Ziggy;

Route::get('api/ziggy', fn () => response()->json(new Ziggy));

Then in your frontend:

import { route } from 'ziggy-js';

// Fetch config on app initialization
const response = await fetch('https://api.example.com/api/ziggy');
const Ziggy = await response.json();

// Store it globally or in your state management
globalThis.Ziggy = Ziggy;

// Now use route() throughout your app
route('posts.index', undefined, undefined, Ziggy);

Auto-Regenerating Routes

When using ziggy:generate, you may want to automatically regenerate the file when routes change. Here’s a Vite plugin example:

// vite.config.js
import { defineConfig } from 'vite';
import { exec } from 'child_process';

function ziggyPlugin() {
    return {
        name: 'ziggy',
        buildStart() {
            exec('php artisan ziggy:generate', (error, stdout) => {
                if (error) {
                    console.error('Ziggy generation failed:', error);
                    return;
                }
                console.log('Ziggy routes generated');
            });
        },
    };
}

export default defineConfig({
    plugins: [ziggyPlugin()],
});

For more examples, see vite-plugin-ziggy.

Next Steps

Vue Integration

Use Ziggy with Vue 2 and Vue 3

React Integration

Use Ziggy with React via the useRoute hook

TypeScript

Configure TypeScript types and autocompletion

Filtering Routes

Control which routes are exposed to the frontend