In this tutorial we will see how to install & setup svelte with inertia js in laravel 9.
Laravel Inertia Svelte Server-side setup
Create Laravel Project
Run below command to create laravel project.
composer create-project laravel/laravel inertia-svelte
Install dependencies
Install the Inertia server-side adapters using the preferred package manager for that language or framework.
composer require inertiajs/inertia-laravel
Create Root template
Next, you need to create app.blade.php file for root template.
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" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
Create Inertia Middleware
php artisan inertia:middleware
Once generated, register the HandleInertiaRequests middleware in your App\Http\Kernel, as the last item in your web middleware group.
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],
Laravel Inertia Svelte Client-side setup
Once you have your server-side framework configured, you then need to setup your client-side framework. Inertia currently provides support for Svelte.
Install svelte dependencies
npm install @inertiajs/inertia @inertiajs/inertia-svelte
yarn add @inertiajs/inertia @inertiajs/inertia-svelte
Initialize app
resources/js/app.js
import { createInertiaApp } from '@inertiajs/inertia-svelte'
createInertiaApp({
resolve: name => require(`./Pages/${name}.svelte`),
setup({ el, App, props }) {
new App({ target: el, props })
},
})
Install svelte-loader
npm install --save svelte svelte-loader
Add svelte loader in webpack.mix.js
webpack.mix.js
const mix = require('laravel-mix');
const path = require('path')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
mainFields: ['svelte', 'browser', 'module', 'main'],
alias: {
'@': path.resolve('resources/js'),
},
},
module: {
rules: [
{
test: /\.(svelte)$/,
use: {
loader: 'svelte-loader',
options: {
emitCss: true,
hotReload: true,
},
},
},
],
},
});
Create Pages Folder in resources/js/Pages/Welcome.svelte.
resources/js/Pages/Welcome.svelte
<script>
let title = 'Laravel Inertia with Svelte';
</script>
<h1>Hello {title}!</h1>
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return Inertia('Welcome');
});
Open two terminal one for php artisan serve and second for npm run watch or npm run dev.
php artisan serve
run npm:
npm run dev