Laravel與Inertia整合

Controller x View

範例如下，透過以下方式，將資料傳入vue







public function edit(Request $request): Response
{
    return Inertia::render('Profile/Edit', [
        'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
        'status' => session('status'),
    ]);
}

在vue中透過props接收資料，此檔案位置為resources\js\PagesProfile\Edit








<script>
export default {
  props: {
    mustVerifyEmail: String,
    status: String,
  }
}
</script>

全域變數

可在 middleware 裡的 HandleInertiaRequests.php 設定全域變數













public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'ziggy' => function () use ($request) {
            return array_merge((new Ziggy)->toArray(), [
                'location' => $request->url(),
            ]);
        },
    ]);
}

在vue中透過以下方法使用



<div class="font-medium text-base text-gray-800">
    {{ $page.props.auth.user.name }}
</div>

全域使用element-plus

安裝


npm install element-plus --save

app.js 導入

只需增加有 Add this line 註解的行數































import "./bootstrap";
import "../css/app.css";

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import ElementPlus from "element-plus"; // Add this line
import "element-plus/dist/index.css"; // Add this line
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m";

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/*.vue")
        ),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(ElementPlus) // Add this line
            .mount(el);
    },
    progress: {
        color: "#4B5563",
    },
});

範例使用

更改 Dashboard.vue















































































<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
import { ref } from 'vue'

const value1 = ref([])
const value2 = ref([])
const value3 = ref([])
const value4 = ref([])
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
</script>

<template>

    <Head title="Dashboard" />

    <AuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">You're logged in!</div>
                </div>
            </div>
        </div>

        <div class="m-4">
            <p>default</p>
            <el-select v-model="value1" multiple placeholder="Select" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="m-4">
            <p>use collapse-tags</p>
            <el-select v-model="value2" multiple collapse-tags placeholder="Select" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="m-4">
            <p>use collapse-tags-tooltip</p>
            <el-select v-model="value3" multiple collapse-tags collapse-tags-tooltip placeholder="Select"
                style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="m-4">
            <p>use max-collapse-tags</p>
            <el-select v-model="value4" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3"
                placeholder="Select" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
    </AuthenticatedLayout>
</template>

成果如下圖

Laravel與Inertia整合

Controller x View

全域變數

全域使用element-plus

安裝

app.js 導入

範例使用

Read more

紀錄在Laravel中使用Line message api以及LIFF

Laravel 11 使用 Pusher Channels 實現廣播功能完整教程

Laravel 跨網站自動登入實踐：利用 JWT 深入解析

基于微服务架构的物联网中间件设计