More than 3 years have passed since last update.

Laravel + Vue.js でSPA 開発環境構築メモ

Last updated at 2021-09-19Posted at 2021-09-19

各種パッケージのインストール

Laravel6.x のインストール

composerを使ってLaravelのインストールとプロジェクトを作成します。

composer create-project --prefer-dist laravel/laravel sample-project "6.*"

Laravel/ui のインストール

cd sample-project
composer require laravel/ui:^1.0 --dev

Vue.jsのインストール

php artisan ui vue

Vue Routerのインストール

npm install vue-router -D

Vuexのインストール

npm install vuex -D

各パッケージをコンパイル

npm install && npm run dev

 DONE  Compiled successfully in 5890ms                                                                                                                                                          14:54:22

       Asset      Size   Chunks             Chunk Names
/css/app.css   179 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.41 MiB  /js/app  [emitted]  /js/app

実行

php artisan serve

画面が起動する

Vue.jsのVueRouterによるSPAの実装

ルーティング用ファイルを作成・修正

ルーティングについてはVueRouterが担当するため、Laravelのルーティングは使用しない。

routes/web.php

<?php

Route::get('/{any}', function() {
    return view('index');
})->where('any', '.*');

上記で返すbladeファイルを新規作成（これがSPAの起点となる）

resources/views/index.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Vue Laravel SPA') }}</title>

    <!-- Styles -->
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<!-- Scripts -->
<script src="{{ mix('/js/app.js') }}" defer></script>
</body>
</html>

Vueインスタンスを作成するファイルを下記のように修正する

resources/js/app.js

require('./bootstrap');

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

new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app');

VueRouterの設定ファイルを新規作成

resources/js/router.js

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

Vue.use(Router);

import Home from './components/Home.vue'
import ExampleComponent from './components/ExampleComponent.vue';

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/example',
      name: 'example',
      component: ExampleComponent
    },
  ]
});

Vueコンポーネントの作成

resources/App.vue

<template>
  <div> 
    <div>
      <router-link to="/" tag="button">Home</router-link>
      <router-link to="/example">Example</router-link>
    </div>
    <router-view/>
  </div>
</template>
 
<script>
</script>
 
<style scoped>
a {
  color: greenyellow;
  text-decoration: none;
}
 
a.router-link-exact-active {
  color: orange;
  font-weight: bold;
}
</style>

resources/js/components/Home.vue

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

          <div class="card-body">This is an home page.</div>
        </div>
      </div>
    </div>
  </div>
</template>

resources/js/components/ExampleComponent.vue

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

          <div class="card-body">I'm an example component.</div>
        </div>
      </div>
    </div>
  </div>
</template>

コンパイル＆実行

npm run dev && php artisan serve

DONE  Compiled successfully in 5768ms

       Asset      Size   Chunks             Chunk Names
/css/app.css   179 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.52 MiB  /js/app  [emitted]  /js/app
Laravel development server started: http://127.0.0.1:8000
[Sun Sep 19 12:26:08 2021] PHP 7.4.15 Development Server (http://127.0.0.1:8000) started

画面が起動する

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up