composer create-project --prefer-dist laravel/laravel laravel10-app dev-master
cd laravel10-app
php artisan -V
cat package.json
npm install
npm update
npm i @vitejs/plugin-vue
cat package.json
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(), // ← この行を追加
],
});
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つ起動します。
npm run dev
mamp などのサーバーを起動するか、 laravel sailを起動します。
(laravel sail を起動する場合は以下の sail インストールを実行後に次のコマンドを実行します)
php artisan serv
composer require laravel/sail --dev
php artisan sail:install
laravel側 ( composer )
composer require inertiajs/inertia-laravel
フロントエンド側 ( node.js/npm )
npm install @inertiajs/inertia @inertiajs/inertia-vue3 --save-dev
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
a タグの代わりに Link コンポーネントを使用します。
<script lang="ts" setup>
import { Link } from "@inertiajs/vue3";
</script>
<template>
<h1>navi</h1>
<Link href="/home">ホームへ移動</Link>
</template>
npm install primevue@^3 --save
npm install primeicons --save