# Laravel與Inertia整合
## Controller x View
範例如下，透過以下方式，將資料傳入vue
```php=
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`
```javascript=
<script>
export default {
props: {
mustVerifyEmail: String,
status: String,
}
}
</script>
```
## 全域變數
可在 `middleware` 裡的 `HandleInertiaRequests.php` 設定全域變數
```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中透過以下方法使用
```html=
<div class="font-medium text-base text-gray-800">
{{ $page.props.auth.user.name }}
</div>
```
## 全域使用element-plus
### 安裝
```cmd=
npm install element-plus --save
```
### app.js 導入
只需增加有 Add this line 註解的行數
```javascript=
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`
```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>
```
成果如下圖
Sign in with Wallet
Connect another wallet