Laravel Vue Inertia Tailwind Setup

Engineer Robin April 02, 2026

Step 1: Laravel Project Create

composer create-project laravel/laravel myapp
cd myapp

Step 2: Install Inertia + Vue

composer require inertiajs/inertia-laravel
npm install @inertiajs/vue3 vue

Step 3: Install Vite + Vue Plugin

npm install --save-dev @vitejs/plugin-vue

👉 vite.config.js edit करो:

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
})

Step 4: Setup Inertia Middleware

php artisan inertia:middleware

👉 app/Http/Kernel.php में add करो:

'web' => [
    \App\Http\Middleware\HandleInertiaRequests::class,
],

🖥️ Step 5: Root Blade File

👉 resources/views/app.blade.php बनाओ:

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @vite('resources/js/app.js')
        <x-inertia::head />
    </head>
    <body>
        <x-inertia::app />
    </body>
</html>

Step 6: Vue + Inertia Setup

👉 resources/js/app.js:

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue'
import { createInertiaApp, Link , Head} from '@inertiajs/vue3'
import Layout from './Pages/Layouts/Layout.vue';

createInertiaApp({
    title: title => `My App - ${title}`,
    resolve:async name => {
        const pages = import.meta.glob('./Pages/**/*.vue')
        const page = await pages[`./Pages/${name}.vue`]();
        page.default.layout = page.default.layout || Layout;
        return page;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .component('Head', Head)
            .component('Link', Link)
            .mount(el)
    },
})

Step 7: Create Vue Page

👉 Folder बनाओ:

resources/js/Pages/Home.vue

👉 Home.vue:

<script setup>
// import Layout from './Layouts/Layout.vue';

// defineOptions({ layout: Layout });
</script>

<template>
    <Head title="Home" />
    <!-- <Layout></Layout> -->
    <div>
        <h1 class="text-red-500 text-5xl font-bold">Home</h1>
        <p>Welcome to your Vue page.</p>
    </div>
</template>

Step 8: Route Setup

👉 routes/web.php:

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});

Step 9: Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

👉 tailwind.config.js:

export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

👉 resources/css/app.css:

@import 'tailwindcss';

Step 10: Run Project

npm install
npm run dev
php artisan serve

👉 Open:

http://127.0.0.1:8000

Final Result

अब तेरे पास:

✔ Laravel backend
✔ Vue frontend
✔ Inertia bridge
✔ Tailwind styling
✔ No starter kit (pure setup)

Bonus (Layout Setup)

अगर layout add करना है:

import Layout from './Layouts/Layout.vue'

page.default.layout = page.default.layout || Layout

Pro Tip

👉 हमेशा structure ऐसा रख:

Pages/
Layouts/
Components/

Inertia JS :- https://inertiajs.com/docs/v3/installation/server-side-setup
Tailwind CSS :- https://tailwindcss.com/docs/installation/using-postcss

Tags
Engineer Robin

Posted by Engineer Robin

Post a Comment

0 Comments