How to Use Laravel Named Routes Inside Vue Component with Inertia js
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.
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.
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.
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.
<!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.
//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>