Laravel 11 + Inertia.js + Vue + Ziggy Setup (Step-by-Step Guide)

Engineer Robin April 04, 2026

 

Laravel 11 + Inertia.js + Vue + Ziggy Setup (Step-by-Step Guide)

Introduction

Agar tum Laravel 11 ke saath Inertia.js aur Vue use kar rahe ho aur frontend me Laravel ke named routes (jaise route('home')) use karna chahte ho, to Ziggy ek important package hai.

Ye guide tumhe complete process step-by-step samjhayegi:

  • Ziggy install karna
  • Blade file update karna
  • app.js configure karna
  • Named routes banana
  • Vue me route use karna

Step 1: Ziggy Install

composer require tighten/ziggy

Step 2: Config Publish (Optional)

php artisan vendor:publish --tag=ziggy-config

Step 3: Blade File Update

File open karo:
resources/views/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Inertia App</title>

    @vite('resources/js/app.js')
    @inertiaHead

    @routes
</head>
<body>
    @inertia
</body>
</html>

@routes directive Ziggy ko frontend me routes available karata hai.

Step 4: app.js Update

File: resources/js/app.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

createInertiaApp({
  resolve: name => require(`./Pages/${name}.vue`),

  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue)
      .mount(el)
  },
})

Step 5: Named Route Create Karo

File: routes/web.php

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home', [
        'test' => 'Hello'
    ]);
})->name('home');

Step 6: Vue Me Route Use Karo

File: resources/js/Pages/Home.vue

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
  <div>
    <h1>{{ $page.props.test }}</h1>

    <Link :href="route('home')">
      Home
    </Link>
  </div>
</template>

Step 7: Project Run Karo

php artisan serve
npm run dev

Common Errors and Fix

Error: route is not defined

Solution:

npm install ziggy-js

Error: Routes work nahi kar rahe

Check:

  • Blade file me @routes add hai ya nahi
  • Route me ->name() diya hai ya nahi

Page reload ho raha hai

Ensure karo ki <a> tag ke jagah <Link> use kar rahe ho:

<Link :href="route('home')">Home</Link>

Summary

FeatureTool
BackendLaravel 11
FrontendVue 3
BridgeInertia.js
Route access in JSZiggy

Conclusion

Is setup ke baad tum easily Laravel ke routes ko Vue me use kar sakte ho. Ye approach clean hai aur SPA experience deta hai bina alag API banaye.

Agar tum next level setup chahte ho, to aage:

  • Authentication system
  • Dashboard layout
  • Role-based access

implement kar sakte ho.

Engineer Robin

Posted by Engineer Robin

Post a Comment

0 Comments