LIVT Stack Setup (Laravel 12, Inertia 2, Vue 3, Tailwind 4)

Getting started with the LIVT stack 😀

Backend

> composer create-project laravel/laravel project
> cd project
> composer require inertiajs/inertia-laravel

resources/views/app.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <title>{{ config('app.name') }}</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @inertiaHead
    </head>
    <body class="text-sm p-2">
        @inertia
    </body>
</html>

> php artisan inertia:middleware

bootstrap/app.php

use App\Http\Middleware\HandleInertiaRequests;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

Frontend

> npm install @vitejs/plugin-vue @inertiajs/vue3

vite.config.js

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

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

resources/js/app.js

import './bootstrap';

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

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

Development

> composer require soloterm/solo --dev

config/solo.php

    'commands' => [
        // 'About' => 'php artisan solo:about',
        // 'Logs' => EnhancedTailCommand::file(storage_path('logs/laravel.log')),
        'PHP' => 'php artisan serve',
        'JS' => 'npm run dev',
        // 'Make' => new MakeCommand,
        // Lazy commands do no automatically start when Solo starts.
        // 'Dumps' => Command::from('php artisan solo:dumps')->lazy(),
        // 'Reverb' => Command::from('php artisan reverb:start --debug')->lazy(),
        // 'Pint' => Command::from('./vendor/bin/pint --ansi')->lazy(),
        // 'Queue' => Command::from('php artisan queue:work')->lazy(),
        // 'Tests' => Command::from('php artisan test --colors=always')->withEnv(['APP_ENV' => 'testing'])->lazy(),
    ],

Navigation

resources/js/Components/Navigation.vue

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

<template>
    <nav class="flex gap-1">
        <Link href="/">Index</Link>
        <Link href="/people">People</Link>
        <Link href="/about">About</Link>
    </nav>
</template>

Pages

resources/js/Pages/Index.vue

<script setup>
import Navigation from '@/Components/Navigation.vue'
</script>

<template>
    <div>
        <Navigation />
    </div>
    <div>
        <p>Index</p>
    </div>
</template>

resources/js/Pages/About.vue

<script setup>
import Navigation from '@/Components/Navigation.vue'
</script>

<template>
    <div>
        <Navigation />
    </div>
    <div>
        <p>About</p>
    </div>
</template>

Controllers

app/Http/Controllers/IndexController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class IndexController extends Controller
{
    public function show()
    {
        return Inertia::render('Index');
    }
}

app/Http/Controllers/AboutController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;

class AboutController extends Controller
{
    public function show()
    {
        return Inertia::render('About');
    }
}

Routes

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\IndexController;
use App\Http\Controllers\AboutController;

Route::get('/', [IndexController::class, 'show']);
Route::get('/about', [AboutController::class, 'show']);

Serve

php artisan solo

http://127.0.0.1:8000/

Docs

https://laravel.com/docs/12.x
https://inertiajs.com/
https://vuejs.org/
https://tailwindcss.com/

larschinkel/gist:37effb95f1b1833552f95e5f49df107a