Laravel11環境でsvelteをinertiaで導入（備忘録）
composer create-project laravel/laravel svelte_crud3
DB svelte_crud3 あらかじめ作成すること
composer require inertiajs/inertia-laravel
php artisan inertia:middleware
bootstrap\app.php を編集する マニュアル通り
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests; ← 追記
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.’/../routes/web.php’,
commands: __DIR__.’/../routes/console.php’,
health: ‘/up’,
)
->withMiddleware(function (Middleware $middleware) { ← 変更
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})
->withExceptions(function (Exceptions $exceptions) {
//
})->create();
とする
view の下の welcome.blade.phpを 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″ />
@vite(‘resources/js/app.js’)
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
@vite(‘resources/css/app.css’)
も追記して
@vite(‘resources/js/app.js’)
@vite(‘resources/css/app.css’)
とする
npm install @inertiajs/svelte
app.jsに追記
もともとあるのは bootstrap の最初の一行だけ
import ‘./bootstrap’;
import { createInertiaApp } from ‘@inertiajs/svelte’
createInertiaApp({
resolve: name => {
const pages = import.meta.glob(‘./Pages/**/*.svelte’, { eager: true })
return pages[./Pages/${name}.svelte]
},
setup({ el, App, props }) {
new App({ target: el, props })
},
})
このように張り付ける
以下 マニュアルには無いが、ネットの情報に依る
npm install @sveltejs/vite-plugin-svelte
npm i bootstrap@5.3.0
vite.config.js 追記および変更する
import { defineConfig } from ‘vite’;
import laravel from ‘laravel-vite-plugin’;
import svelte from ‘@sveltejs/vite-plugin-svelte’ ← 追記
export default defineConfig({
plugins: [
laravel({
input: [‘resources/css/app.css’, ‘resources/js/app.js’],
refresh: true,
}),
svelte() ← 追記
],
});
とした
app.css 空白であったのを
@import ‘node_modules/bootstrap/scss/bootstrap’;
とする
C:\xampp\laravel-project\svelte_crud3\node_modules\bootstrap\scss\bootstrap.scss というのが確認できます。
resources\js の下に Pages フォルダを作成して、Welcome.svelte を作成します。
中身を以下のようにする
<script>
</script>
<p class=”text-primary”>Hello svelte laravel inertia!</p>
<style>
</style>
web.php 変更する
<?php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia; ← 追記
Route::get(‘/’, function () {
//return view(‘welcome’);
return Inertia::render(‘Welcome’); ← viewではなく、Inertia::render となる
});
php artisan serve
npm run dev
エラーでる（涙）
npm install svelte@latest が抜けてたので実行 だめみたい
npm install sass これもやってみる
vite.config.js の import {svelte} from ‘@sveltejs/vite-plugin-svelte’
svelteは 波かっこで囲むこと
npm run dev でブラウザ確認できたが、
[plugin:vite:css] [postcss] ENOENT: no such file or directory, open ‘C:\xampp\laravel-project\svelte_crud3\node_modules\bootstrap\scss\bootstrap
のエラーあり
app.cssをapp.scssにリネーム
app.blade.phpの@vite(‘resources/css/app.scss’)もscssに拡張し変更
ブラウザで Hello svelte laravel inertia! を確認できた！！！
