How to Use Laravel Named Routes Inside Vue Component with Inertia js

1 year ago admin Laravel

In today's lesson, we are going to see how to use Laravel named routes inside the Vue component with Inertia js, we will use ziggy a package that provides a route() helper function that works like Laravel's routes.

Install the package

First, we will add ziggy to our project.

show or hide the code

                                                    
                                                                                                                composer require tightenco/ziggy

Update the file vite.config.js

Next, we will add the path to the installed package, let's update the file vite.config.js.

show or hide the code

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue()
    ],
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue.es.js'),
        }
    }
});

Update the file app.js

Next, to use ziggy with Vue js we need to import and use ziggy's Vue plugin.

show or hide the code

                                                        
                                                                                                                        import './bootstrap';

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { ZiggyVue } from 'ziggy';
import MainLayout from '@/Pages/Layouts/MainLayout.vue';

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    const page = pages[`./Pages/${name}.vue`]
    page.default.layout = page.default.layout || MainLayout
    return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue)
      .mount(el)
  },
})

Add the @routes directive to the main layout

Next, we will add the @routes directive to the main layout which is app.blade.php.

show or hide the code

                                                        
                                                                                                                        <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <title>Laravel Inertia Vue App</title>
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="bg-light">
        @inertia
        @routes
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
</html>

How to use

Now, the route() helper function is available globally we can pass the name of Laravel's route and it will return a URL.

show or hide the code

                                                        
                                                                                                                        //with params
<Link :href="route('tasks.edit', task.id)" class="btn btn-sm btn-warning"> 
 <i class="fas fa-edit"></i> 
</Link>

//without params
<Link :href="route('tasks.create')" class="btn btn-sm btn-warning"> 
 <i class="fas fa-plus"></i> 
</Link>