Building a Vue SPA with Laravel

PHP：7.2

Laravel：7.2

由於 Laravel 可以結合 Vue 使用，當然也可以在 Laravel 上建立 SPA（Single Page Application）。

JavaScript & CSS Scaffolding

在 Laravel 7.2 中，Laravel 已經將前端框架的套件拆出去，因此像 Vue、React、Bootstrap 等套件在預設的 package.json 中是沒有的。

如果要使用，就必須再透過 composer require laravel/ui。

composer require laravel/ui

安裝完成以後，就可以透過 Artisan 來安裝你想要的套件。

; package.json 新增套件，resources/js/app.js 也會新增基本的 init 設定
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

; 加入 auth 參數的話，會自動產生登入頁面
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

由於這篇討論的是 Vue，因此只要安裝 Vue 的就可以了。

Router

要使用 SPA 架構，就需要安裝 Vue Router 來控制 routing。

安裝 Vue Router

npm install vue-router --save-dev

Single Page Application

當套件備齊以後，要建立一個完整 SPA 有幾個地方要調整。

• Vue Page Components
• Vue Router Setting
• Vue App Init
• Laravel Blade Setting
• Laravel Route Setting

Vue Page Components

Vue 的結構就是由各個 Components 組成，因此一開始要建立各個頁面的 Component。

我們可以在 resources/js/components 當中先建立 Home 和 Category 頁面。

Home.vue（Category 可以比照辦理）

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Home</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('Component mounted.')
  }
}
</script>

Vue Router Setting

在頁面的 Component 完成以後，可以開始設定 Vue Router。

可以在 resources/js 下建立一支 router.js 的 Component。

router.js

import Vue from 'vue';
import Router from 'vue-router';

// 引用頁面的 Component
import home from './components/Home.vue';
import category from './components/Category.vue';

// 使用 Vue Router
Vue.use(Router);

// Route 設定
export const routes = [
  { path: '/home', component: home, name:'home'},
  { path: '/category', component: category, name: 'category'},
  { path: '*', redirect: '/home' },
];

// 建立 Vue Router instance
const router = new Router({
  mode: 'history',
  routes
});

export default router;

Vue App Init

在頁面及 route 都準備好之後，修改 resources/js/app.js，將上一步的 Router Component 代入。

app.js

import Vue from 'vue';
import router from './router.js';

export default new Vue({
  el: '#app',
  router
});

Laravel Blade Setting

Vue 的部份都設定完成以後，要在 Laravel Blade 的頁面中引入 Vue 物件。

Notice： 範例使用預設的 welcome.blade.php

resources/views/welcome.blade.php

...
<div class="flex-center position-ref full-height">
  <div class="content">
    <div id="app">
      <div class="links">
        <!-- 建立 Vue Router 連結-->
        <router-link to="/home">Home</router-link>
        <router-link to="/category">Category</router-link>
      </div>
      <!-- Vue Router 代入的內容 -->
      <router-view></router-view>
    </div>
  </div>
</div>
<!-- 引入 Vue app -->
<script src="/js/app.js"></script>
...

Laravel Route Setting

最後一個步驟，就是將 Laravel 所有 route 都指向 welcome.blade.php。

routes/web.php

// 將除了 api prefix 的 request 都導向 welcome.blade.php
Route::get('/{path}', function () {
    return view('welcome');
})->where('path', '^((?!api).)*$');

Final Check

注意一下是否已經做了 npm install，接著只要下 npm run watch 進行編譯後，就可以測試是否成功了。