Laravel Example

Laravel Route with JavaScript

Today I am going to show you how you can write your route names inside javascript file. Laravel provides the flexible way to access your URL by using route name attribute.

Laravel route name in JavaScript

Same now we can use that route naming convention within our JavaScript code. How cool it is right !!

So here I am using Laravel 5.4. Basically, it's a package called Ziggy. The Very powerful package that provides JavaScript functions to write route names instead of writing custom URLs.

To install package you can use this command or you can clone from GitHub too.

composer require tightenco/ziggy

After installing the package you need to add a service provider to load service at app.php into config folder.

// config/app.php

'providers' => [

As we all know Laravel uses blade template engine to run HTML or Front Code. Here we need to add @route blade directive at the layout or any blade file where you want to use a feature of JavaScript route.

Here I am using default welcome.blade.php file which is cames when you install fresh Laravel setup. Also first you have to register your Laravel routes either it will throw an error.

// routes/web.php


Here I uses Laravel resources method. Behind the scene it will write 7 diffrent URLs for with route name also. That will look like this:

URL Route name
/posts        -[GET] posts.index
/posts/create  -[GET] posts.create
/posts/store -[POST]
/posts/{id}/edit -[GET] posts.edit
/posts/{id} -[PATCH] posts.update
/posts/{id} -[GET]
/posts/{id} -[DELETE] posts.destroy


As I specified Laravel provides default routing names. Now we can write any Route name and Laravel convert it as a URL.

Here is my welcome.blade.php file:

<!doctype html>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script type="text/javascript">
            var edit  = route('posts.edit', {id: 1}) // Returns '/posts/1'

We should register @routes directive. Inside script tag, we need to write our JavaScript code.

route('route_name'); function will use you can pass parameter into second parameter. The method will return your object you need to get 'url' key to get your URL.

Remember if you do not register your route it will throw you an error. If you want to pass URL into Ajax or axios request just pass the whole object into a function like this:

You can pass a parameter into second argument of route method. like this:

var edit  = route('posts.edit', {id: 1}) // Returns '/posts/1'
// OR
var edit  = route('posts.edit', [1]) // Returns '/posts/1'
// OR
var edit  = route('posts.edit', 1) // Returns '/posts/1'

You can use any method of above that I shows. Suppose you want to pass extra parameter you can use JavaScript Object notation as I shows in first example above snippet. 

You can whitelist and blacklist your route. for that you need to create ziggy.php into config folder. Later on you can specify your routing like this:

// config/ziggy.php
return [
    'whitelist' => ['api.*'],
    'blacklist' => ['admin.*'],

it will allow all route with api prefix and block all route with admin prefix. For more information visit this.

Tutorial By Gautam Patadiya