人気のPHP WEBアプリケーションフレームワークLaravelのTipsを記録していきます

● Laravel10 + Vue3 + inertia

● Laravelのインストール

composer create-project --prefer-dist laravel/laravel laravel10-app dev-master
cd laravel10-app
php artisan -V
cat package.json

● Vue3のインストール

npm install
npm update
npm i @vitejs/plugin-vue
cat package.json 

● vite.config.js を変更

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; // ← この行を追加


export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(), // ← この行を追加
    ],
});

● vueの表示を確認

resources/js/app.js を以下のようにします

import './bootstrap';

// 追加
document.getElementById('app').textContent = 'Hello Vite !';

resources/views/welcome.blade.php をごっそり以下のように書き換えます

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel</title>
  @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
  <div id="app"></div>
</body>
</html>

サーバーを2つ起動します。

1. vue3のdev serverを起動

npm run dev

2. laravel serverを起動

mamp などのサーバーを起動するか、 laravel sailを起動します。

(laravel sail を起動する場合は以下の sail インストールを実行後に次のコマンドを実行します)

php artisan serv

● sailインストールする場合は以下を実行します。

composer require laravel/sail --dev
php artisan sail:install

● inertia のインストール

laravel側 ( composer )

composer require inertiajs/inertia-laravel

フロントエンド側 ( node.js/npm )

npm install @inertiajs/inertia @inertiajs/inertia-vue3 --save-dev

● inertia の表示テスト ( http://localhost/InertiaSample で inertiaで接続された サンプルページを表示させる )

routes/web.php に以下を追加

// inertiテスト
Route::get('inertia-sample', function () {
    return Inertia::render('InertiaSample', ['message' => 'hello Inertia !!!',]);
});

resources/js/Pages/InertiaSample.vue

<template>
    <h1>InertiaSample</h1>
    <div>{{ props.message }}</div>
</template>

<script lang="ts" setup>
type Props = {
    message: string;
};
const props = defineProps<Props>();
console.log("● props");
console.log(props);
</script>

フロントアプリをビルドするため次のコマンドを実行します

npm run dev

(一度起動すると常駐してファイル変更のたびにビルド(開発用ビルド)します。)

これでアクセスしてみます。
http://localhost/InertiaSample

● inertia Link を使用する

a タグの代わりに Link コンポーネントを使用します。

<script lang="ts" setup>
import { Link } from "@inertiajs/vue3";
</script>
<template>
    <h1>navi</h1>
    <Link href="/home">ホームへ移動</Link>
</template>

● PRIME Vue を使用する

npm install primevue@^3 --save
npm install primeicons --save
No.2284
02/14 17:37

edit