Ziggy provides a JavaScript route() helper function that works like Laravel’s, making it easy to use your Laravel named routes in JavaScript. Ziggy supports all versions of Laravel from 5.4 on-ward and all modern browsers. You can also use Ziggy in different Javascript frameworks like Vue Js or React Js.

Installation

You can install Ziggy into your Laravel app via composer. Just run this command:

composer require tightenco/ziggy

Next, you’ve to add the @routes Blade directive to your main layout (before your application’s JavaScript), and the route() helper function will now be available globally!

Usage

The route() helper

Ziggy’s route() helper function works the same as Laravel’s. You can easily pass it the name of one of your routes, and the parameters you want to pass to the route, and it will return a URL.

Basic usage

First, you’ve to create a route in the web.php, and then you can use it in app.js.

// routes/web.php
Route::get('posts', fn (Request $request) => /* ... */)->name('posts.index');


// app.js
route('posts.index');  // 'https://ziggy.test/posts'

With parameters

You can also pass parameters to your route in your app.js.

// routes/web.php
Route::get('posts/{post}', fn (Request $request, Post $post) => /* ... */)->name('posts.show');

// app.js
route('posts.show', 1);           // 'https://ziggy.test/posts/1'
route('posts.show', [1]);         // 'https://ziggy.test/posts/1'
route('posts.show', { post: 1 }); // 'https://ziggy.test/posts/1'

With multiple parameters

// routes/web.php
Route::get('events/{event}/venues/{venue}', fn (Request $request, Event $event, Venue $venue) => /* ... */)->name('events.venues.show');

// app.js
route('events.venues.show', [1, 2]);                 // 'https://ziggy.test/events/1/venues/2'
route('events.venues.show', { event: 1, venue: 2 }); // 'https://ziggy.test/events/1/venues/2'

With query parameters

// routes/web.php
Route::get('events/{event}/venues/{venue}', fn (Request $request, Event $event, Venue $venue) => /* ... */)->name('events.venues.show');

// app.js
route('events.venues.show', {
    event: 1,
    venue: 2,
    page: 5,
    count: 10,
});
// 'https://ziggy.test/events/1/venues/2?page=5&count=10'

If you have a query parameter with the same name as a route parameter, you can nest it under a _query key:

route('events.venues.show', {
    event: 1,
    venue: 2,
    _query: {
        event: 3,
        page: 5,
    },
});
// 'https://ziggy.test/events/1/venues/2?event=3&page=5'

Like Laravel’s route() helper, Ziggy automatically encodes boolean query parameters as integers in the query string:

route('events.venues.show', {
    event: 1,
    venue: 2,
    _query: {
        draft: false,
        overdue: true,
    },
});
// 'https://ziggy.test/events/1/venues/2?draft=0&overdue=1'

Setup in Vue Js

You can easily utilize Ziggy in other Javascript Frameworks like Vue Js. Ziggy includes a Vue plugin to make it easy for you to utilize the route() helper throughout your Vue app:

import { createApp } from 'vue';
import { ZiggyVue } from 'ziggy';
import { Ziggy } from './ziggy';
import App from './App';
createApp(App).use(ZiggyVue, Ziggy);

// Vue 2
import Vue from 'vue'
import { ZiggyVue } from 'ziggy';
import { Ziggy } from './ziggy';
Vue.use(ZiggyVue, Ziggy);

If you employ this plugin with the Laravel Mix alias shown above, you’ve to update the alias to vendor/tightenco/ziggy/dist/vue.

Note:

If you utilize the @routes Blade directive in your views, Ziggy’s configuration will already be available globally, so you don’t need to import the Ziggy config object and pass it into use().

Now you can utilize route() anywhere in your Vue components and templates.

For Example:

<a class="nav-link" :href="route('home')">Home</a>

There are many other options in this package, you can view its whole documentation and source code on Github.