# Laravel9 + vite + inertiajs + vue3 安裝
## 前置準備
1. composer
2. node.js
## 建立 Laravel 專案
#### 至存放網站根目錄，例如 www、code
```cmd=
cd ~/www
composer create-project laravel/laravel 專案名稱
```
#### 設定 /.env 檔案
```env=5
APP_URL=http://你的網址
```
## 安裝 Vite 和 laravel 套件
#### `Laravel 9` 中的 `package.json` 中，預設已經有 `vite` 與 `laravel-vite-plugin` 了，所以可以直接 `npm install`
```cmd=
npm install
```
#### 如果不是 `Laravel 9` ，請下以下指令
```cmd=
npm install laravel-vite-plugin vite
```
## 安裝 `inertiajs` 套件
### 後端：
#### 使用 `composer` 安裝 `inertiaj-laravel`
```cmd=
composer require inertiajs/inertia-laravel
```
#### 設定 `inertia:middleware`
```cmd=
php artisan inertia:middleware
```
#### 於 `App\Http\Kernel.php` 中，將生成的 `HandleInertiaRequests.php` 引入到 web 內
```php=32
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],
```
### 前端：
#### 使用 `npm` 安裝 `Inertia` 相關套件
```cmd=
npm install --save-dev @inertiajs/inertia @inertiajs/inertia-vue3
```
#### 修改 `/resources/js/app.js` 檔案
```javascript=
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
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)
.mount(el);
},
});
```
## 設定 `vite.config.js`
#### 使用 `npm` 安裝 `vite` 與 `vue` 整合的套件
```cmd=
npm install --save-dev @vitejs/plugin-vue
```
## 於 `/vite.config.js` 中修改以下內容
```javascript=
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
```
## 修改 `Laravel route`
#### 修改 `/routes/web.php` 中修改以下內容
```laravel=
use Inertia\Inertia;
// ...
Route::get('/', function () {
return Inertia::render('Home');
});
```
#### 建立 `vue` 檔案
#### 於 `/resources/js/` 中建立 `pages` 資料夾，並於資料夾中建立 `Home.vue` 檔案
```htmlembedded=
<template>
<Head title="測試" />
<div>
<p>{{ name }}</p>
<p>{{ email }}</p>
</div>
</template>
<script setup>
import { Head } from '@inertiajs/inertia-vue3';
defineProps({
name: String,
email: String,
});
</script>
```
## 建立 `app.blade.php`
於 `/resources/views/` 中，新增一個 `app.blade.php` 檔案
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@vite(['resources/js/app.js', "resources/js/pages/{$page['component']}.vue"])
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
```
## 檢視畫面
#### 需要邊修改邊查看畫面時，請下
```cmd=
npm run dev
```
#### 確定完成後，準備上線的話，將會於 `/public/` 中生成 `build` 資料夾
```cmd=
npm run build
```
---
# 以下為設定 `SSR`
## 安裝 `SSR` 需要的套件
#### 使用 `npm` 安裝 `ssr` 需要的套件
```cmd=
npm install --save-dev @vue/server-renderer @inertiajs/server
```
## 設定 `Laravel config`
#### 使用 `php artisan` 建立 `inertia config`
```cmd=
php artisan vendor:publish --provider="Inertia\ServiceProvider"
```
#### 指令下完後，於 `/config/` 中會新增一個 `inertia.php` 的檔案，將 `ssr` 中的 `enabled` 改為 `true`
```php=
<?php
return [
/*
|--------------------------------------------------------------------------
| Server Side Rendering
|--------------------------------------------------------------------------
|
| These options configures if and how Inertia uses Server Side Rendering
| to pre-render the initial visits made to your application's pages.
|
| Do note that enabling these options will NOT automatically make SSR work,
| as a separate rendering service needs to be available. To learn more,
| please visit https://inertiajs.com/server-side-rendering
|
*/
'ssr' => [
'enabled' => true,
'url' => 'http://127.0.0.1:13714/render',
],
// ...
```
## 設定 `SSR` 相關檔案
#### 於 `/resources/js/` 中，新增一個 `ssr.js` 檔案
```javascript=
import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import createServer from '@inertiajs/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = 'Laravel';
createServer((page) =>
createInertiaApp({
page,
render: renderToString,
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')),
setup({ app, props, plugin }) {
return createSSRApp({ render: () => h(app, props) })
.use(plugin);
},
})
);
```
#### 於 `/vite.config.js` 中新增 `ssr` 設定
```javascript
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
ssr: 'resources/js/ssr.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
ssr: {
noExternal: [
'@inertiajs/server',
],
},
});
```
#### 於 `/package.json` 中修改 `build` 指令
```javascript=
// ...
"scripts": {
"dev": "vite",
"build": "vite build && vite build --ssr",
"build:ssr": "node bootstrap/ssr/ssr.mjs"
},
// ...
```
Sign in with Wallet
Connect another wallet