Ziggy Vite Plugin

Vite plugin for generating Ziggy route types automatically when your route files change

npm i -D vite-plugin-ziggy

Usage

After you installed vite-plugin-ziggy add it to your Vite configuration like so:

import { defineConfig } from 'vite';
...
import ziggy from 'vite-plugin-ziggy';

export default defineConfig({
  plugins: [
    ...
    ziggy({
      sail: true, // Uses Sail instead of PHP
      group: 'api',
      url: 'http://laravel-app.test',
      only: ['admin.*'],
      except: ['debugbar.*'],
    }),
  ],
});

Then just add the types to tsconfig.json:

{
    "compilerOptions": {
        ...,
        "types": [
            "vite/client",
            "vite-plugin-ziggy/routes"
        ]
    }
}

After that, every time you make a change to any routes in routes/ This plugin will auto generate your route types for Ziggy's route() to auto complete for you.

Configuration

This plugin allows you to set the following configuration:

Key	Description	Required	Default
path	The path to output the types file	❌ No	node_modules/vite-plugin-ziggy/routes
only	Include ONLY these routes	❌ No	[]
except	All routes EXCEPT these	❌ No	[]
sail	Use sail instead of the php command	❌ No	false
group	Route group to generate	❌ No	undefined (not set by default)
url	The application URL	❌ No	undefined (not set by default)
types	Generate TypeScript declaration file	❌ No	true
typesOnly	Generate only the TypeScript declaration file	❌ No	true