serversideup · danpastori · Sep 22, 2025 · Sep 22, 2025
diff --git a/app/Http/Controllers/AppController.php b/app/Http/Controllers/AppController.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
+class AppController extends Controller
+{
+    public function index( Request $request )
+    {
+        return Inertia::render('Index', [
+
+        ]);
+    }
+}
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Http\Request;
+use Inertia\Middleware;
+
+class HandleInertiaRequests extends Middleware
+{
+    /**
+     * The root template that's loaded on the first page visit.
+     *
+     * @see https://inertiajs.com/server-side-setup#root-template
+     *
+     * @var string
+     */
+    protected $rootView = 'app';
+
+    /**
+     * Determines the current asset version.
+     *
+     * @see https://inertiajs.com/asset-versioning
+     */
+    public function version(Request $request): ?string
+    {
+        return parent::version($request);
+    }
+
+    /**
+     * Define the props that are shared by default.
+     *
+     * @see https://inertiajs.com/shared-data
+     *
+     * @return array<string, mixed>
+     */
+    public function share(Request $request): array
+    {
+        return [
+            ...parent::share($request),
+            //
+        ];
+    }
+}
diff --git a/bootstrap/app.php b/bootstrap/app.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Middleware\HandleInertiaRequests;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -11,7 +12,9 @@
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware): void {
-        //
+        $middleware->web(append: [
+            HandleInertiaRequests::class,
+        ]);
     })
     ->withExceptions(function (Exceptions $exceptions): void {
         //

diff --git a/composer.json b/composer.json
@@ -7,6 +7,7 @@
     "license": "MIT",
     "require": {
         "php": "^8.2",
+        "inertiajs/inertia-laravel": "^2.0",
         "laravel/framework": "^12.0",
         "laravel/tinker": "^2.10.1",
         "serversideup/cfspeedtest": "^2025.09",

diff --git a/composer.lock b/composer.lock
diff --git a/package.json b/package.json
@@ -13,5 +13,11 @@
         "laravel-vite-plugin": "^2.0.0",
         "tailwindcss": "^4.0.0",
         "vite": "^7.0.4"
+    },
+    "dependencies": {
+        "@inertiajs/vue3": "^2.1.7",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "@vueuse/core": "^13.9.0",
+        "vue": "^3.5.21"
     }
 }
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -4,8 +4,4 @@
 @source '../../storage/framework/views/*.php';
 @source '../**/*.blade.php';
 @source '../**/*.js';
-
-@theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
-}
+@source '../**/*.vue';
diff --git a/resources/js/Pages/Index.vue b/resources/js/Pages/Index.vue
@@ -0,0 +1,9 @@
+<template>
+    <h1 class="text-2xl font-bold">Here</h1>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1 +1,18 @@
 import './bootstrap';
+
+import { createApp, h } from 'vue'
+import { createInertiaApp } from '@inertiajs/vue3'
+import { resolvePage } from './resolvePage';
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: name => {
+        return resolvePage(name)
+    },
+    setup({ el, App, props, plugin }) {
+        createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .mount(el)
+    },
+})
diff --git a/resources/js/resolvePage.js b/resources/js/resolvePage.js
@@ -0,0 +1,13 @@
+export function resolvePage(name) {
+    const pagePath = `./Pages/${name}.vue`;
+
+    const pages = import.meta.glob('./Pages/**/*.vue');
+
+    if( !pages[pagePath] ) {
+        throw new Error(`Page not found: ${pagePath}`);
+    }
+
+    return typeof pages[pagePath] === 'function' 
+        ? pages[pagePath]()
+        : pages[pagePath];
+}
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title inertia>{{ config('app.name', 'Laravel') }}</title>
+
+        @vite('resources/js/app.js')
+        @vite('resources/css/app.css')
+
+        @inertiaHead
+    </head>
+
+    <body class="font-sans antialiased">
+        @inertia
+    </body>
+</html>
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
diff --git a/routes/web.php b/routes/web.php
@@ -2,6 +2,6 @@
 
 use Illuminate\Support\Facades\Route;
 
-Route::get('/', function () {
-    return view('welcome');
-});
+use App\Http\Controllers\AppController;
+
+Route::get('/', [AppController::class, 'index']);
diff --git a/vite.config.js b/vite.config.js
@@ -2,6 +2,7 @@ import fs from 'fs';
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import tailwindcss from '@tailwindcss/vite';
+import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
     server: {
@@ -21,5 +22,13 @@ export default defineConfig({
             refresh: true,
         }),
         tailwindcss(),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+            },
+        }),
     ],
 });