Last active
June 14, 2024 08:57
-
-
Save ewilan-riviere/f1dbc20669ed2669f745e3e0e0771537 to your computer and use it in GitHub Desktop.
HandleInertiaRequests and other Inertia files. Example for Inertia with Ziggy (2024 version). Created by default when laravel/jetstream install Inertia with Vue 3 SSR.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// resources/js/app.js | |
import './bootstrap'; | |
import '../css/app.css'; | |
import { createApp, h } from 'vue'; | |
import { createInertiaApp } from '@inertiajs/vue3'; | |
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; | |
import { ZiggyVue } from '../../vendor/tightenco/ziggy'; | |
const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; | |
createInertiaApp({ | |
title: (title) => `${title} - ${appName}`, | |
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), | |
setup({ el, App, props, plugin }) { | |
return createApp({ render: () => h(App, props) }) | |
.use(plugin) | |
.use(ZiggyVue) | |
.mount(el); | |
}, | |
progress: { | |
color: '#4B5563', | |
}, | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// bootstrap/app.php | |
use Illuminate\Foundation\Application; | |
use Illuminate\Foundation\Configuration\Exceptions; | |
use Illuminate\Foundation\Configuration\Middleware; | |
use Kiwilan\LaravelNotifier\Facades\Journal; | |
return Application::configure(basePath: dirname(__DIR__)) | |
->withMiddleware(function (Middleware $middleware) { | |
$middleware->web(append: [ | |
\App\Http\Middleware\HandleInertiaRequests::class, // Add `HandleInertiaRequests::class` to web middleware. | |
]); | |
}) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "laravel/laravel", | |
"type": "project", | |
"description": "The skeleton application for the Laravel framework.", | |
"keywords": ["laravel", "framework"], | |
"license": "MIT", | |
"require": { | |
"php": "^8.2", | |
"inertiajs/inertia-laravel": "^1.0", | |
"laravel/framework": "^11.9", | |
"laravel/jetstream": "^5.1", | |
"laravel/sanctum": "^4.0", | |
"laravel/tinker": "^2.9", | |
"tightenco/ziggy": "^2.0" | |
}, | |
"require-dev": { | |
"fakerphp/faker": "^1.23", | |
"laravel/pint": "^1.13", | |
"laravel/sail": "^1.26", | |
"mockery/mockery": "^1.6", | |
"nunomaduro/collision": "^8.0", | |
"phpunit/phpunit": "^11.0.1" | |
}, | |
"autoload": { | |
"psr-4": { | |
"App\\": "app/", | |
"Database\\Factories\\": "database/factories/", | |
"Database\\Seeders\\": "database/seeders/" | |
} | |
}, | |
"autoload-dev": { | |
"psr-4": { | |
"Tests\\": "tests/" | |
} | |
}, | |
"scripts": { | |
"post-autoload-dump": [ | |
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", | |
"@php artisan package:discover --ansi" | |
], | |
"post-update-cmd": [ | |
"@php artisan vendor:publish --tag=laravel-assets --ansi --force" | |
], | |
"post-root-package-install": [ | |
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" | |
], | |
"post-create-project-cmd": [ | |
"@php artisan key:generate --ansi", | |
"@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"", | |
"@php artisan migrate --graceful --ansi" | |
] | |
}, | |
"extra": { | |
"laravel": { | |
"dont-discover": [] | |
} | |
}, | |
"config": { | |
"optimize-autoloader": true, | |
"preferred-install": "dist", | |
"sort-packages": true, | |
"allow-plugins": { | |
"pestphp/pest-plugin": true, | |
"php-http/discovery": true | |
} | |
}, | |
"minimum-stability": "stable", | |
"prefer-stable": true | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// app/Http/Middleware/HandleInertiaRequests.php | |
namespace App\Http\Middleware; | |
use Illuminate\Http\Request; | |
use Inertia\Middleware; | |
use Tighten\Ziggy\Ziggy; | |
class HandleInertiaRequests extends Middleware | |
{ | |
/** | |
* The root template that is loaded on the first page visit. | |
* | |
* @var string | |
*/ | |
protected $rootView = 'app'; | |
/** | |
* Determine the current asset version. | |
*/ | |
public function version(Request $request): ?string | |
{ | |
return parent::version($request); | |
} | |
/** | |
* Define the props that are shared by default. | |
* | |
* @return array<string, mixed> | |
*/ | |
public function share(Request $request): array | |
{ | |
return [ | |
...parent::share($request), | |
'ziggy' => fn () => [ | |
...(new Ziggy)->toArray(), | |
'location' => $request->url(), | |
], | |
]; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"private": true, | |
"type": "module", | |
"scripts": { | |
"dev": "vite", | |
"build": "vite build && vite build --ssr" | |
}, | |
"devDependencies": { | |
"@inertiajs/vue3": "^1.0.14", | |
"@tailwindcss/forms": "^0.5.7", | |
"@tailwindcss/typography": "^0.5.10", | |
"@vitejs/plugin-vue": "^5.0.0", | |
"@vue/server-renderer": "^3.3.13", | |
"autoprefixer": "^10.4.16", | |
"axios": "^1.6.4", | |
"laravel-vite-plugin": "^1.0", | |
"postcss": "^8.4.32", | |
"tailwindcss": "^3.4.0", | |
"vite": "^5.0", | |
"vue": "^3.3.13" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// resources/js/ssr.js | |
import { createSSRApp, h } from 'vue'; | |
import { renderToString } from '@vue/server-renderer'; | |
import { createInertiaApp } from '@inertiajs/vue3'; | |
import createServer from '@inertiajs/vue3/server'; | |
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; | |
import { ZiggyVue } from '../../vendor/tightenco/ziggy'; | |
const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; | |
createServer((page) => | |
createInertiaApp({ | |
page, | |
render: renderToString, | |
title: (title) => `${title} - ${appName}`, | |
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), | |
setup({ App, props, plugin }) { | |
return createSSRApp({ render: () => h(App, props) }) | |
.use(plugin) | |
.use(ZiggyVue, { | |
...page.props.ziggy, | |
location: new URL(page.props.ziggy.location), | |
}); | |
}, | |
}) | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { defineConfig } from 'vite'; | |
import laravel from 'laravel-vite-plugin'; | |
import vue from '@vitejs/plugin-vue'; | |
export default defineConfig({ | |
plugins: [ | |
laravel({ | |
input: 'resources/js/app.js', | |
ssr: 'resources/js/ssr.js', | |
refresh: true, | |
}), | |
vue({ | |
template: { | |
transformAssetUrls: { | |
base: null, | |
includeAbsolute: false, | |
}, | |
}, | |
}), | |
], | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment