xDev Asia

Inertia.js モノリスアーキテクチャ。 Laravel + Vue/React SPA。共有データ、フォームヘルパー、ファイルアップロード。サーバー側のレンダリング。慣性対ライブワイヤー対従来の SPA。

Laravel: 基本から上級まで

パート 5: 最新のフルスタック

xdev.asia

1. Inertia.js のセットアップ

composer require inertiajs/inertia-laravel
npm install @inertiajs/vue3

// Controller — trả về Inertia response
use Inertia\Inertia;

class ProductController extends Controller
{
    public function index()
    {
        return Inertia::render('Products/Index', [
            'products' => Product::with('category')->paginate(20),
            'filters' => request()->only(['search', 'category']),
        ]);
    }

    public function store(StoreProductRequest $request)
    {
        Product::create($request->validated());
        return redirect()->route('products.index')
            ->with('success', 'Sản phẩm đã được tạo!');
    }
}

2. Vue ページ

<!-- resources/js/Pages/Products/Index.vue -->
<script setup>
import { Head, Link, router } from '@inertiajs/vue3';
import { ref, watch } from 'vue';

const props = defineProps({
    products: Object,
    filters: Object,
});

const search = ref(props.filters.search ?? '');

watch(search, (value) => {
    router.get('/products', { search: value }, {
        preserveState: true,
        replace: true,
    });
});
</script>

<template>
    <Head title="Sản phẩm" />
    <input v-model="search" placeholder="Tìm kiếm..." />
    <div v-for="product in products.data" :key="product.id">
        <Link :href="`/products/${product.slug}`">
            {{ product.name }} - {{ product.price }}đ
        </Link>
    </div>
</template>

3. 慣性形式

<script setup>
import { useForm } from '@inertiajs/vue3';

const form = useForm({
    name: '',
    price: 0,
    description: '',
    image: null,
});

function submit() {
    form.post('/products', {
        forceFormData: true,
        onSuccess: () => form.reset(),
    });
}
</script>

<template>
    <form @submit.prevent="submit">
        <input v-model="form.name" />
        <span v-if="form.errors.name">{{ form.errors.name }}</span>
        <button :disabled="form.processing">Lưu</button>
    </form>
</template>

4. 共有データ

// Middleware HandleInertiaRequests
public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'auth' => ['user' => $request->user()],
        'flash' => ['success' => $request->session()->get('success')],
    ];
}

5. ライブワイヤー vs 慣性

特長	ライブワイヤー	慣性
フロントエンド	ブレード + Alpine.js	Vue/React
スパフィール	良い	とても良い
学習曲線	低い	平均
JSエコシステム	制限事項	フル
SSR	自動的に	セットアップが必要です

次の記事: Laravelでのテスト。

レッスン 18: Inertia.js と Vue/React の統合

1. Inertia.js のセットアップ

2. Vue ページ

3. 慣性形式

4. 共有データ

5. ライブワイヤー vs 慣性