LaravelでVue.jsを使って開発するファーストステップ

公開： 2019年5月11日

カテゴリ： PHP Laravel
タグ： Laravel,LaravelMix,Vue

Laravelではフロントエンドを記述するJavaScript FWとしてかなり早くからVue.jsをサポートしています。

今回は、LaravelでVue.jsを用いた開発を始める際のファーストステップとして、Vue.jsを使った画面出力を行います。

アジェンダ

開発環境
Laravelとフロントエンド
Vue.jsを動かす為のセッティング
Vue.jsを使った表示
Vue.jsで実装した機能を動作させる

開発環境

今回の開発環境は以下の通りです。

Laravel 5.8
Node.js 12.x

npmコマンドを使用するので、Node.jsをインストールしておいてください。

Laravelのルートディレクトリを「laravel/」とします。

Laravelとフロントエンド

Laravelでは、コンパイルなどを要するフロントエンド開発環境としてVue.jsとReactをサポートしています。

この２つのFWにおいては難しい設定の必要がなく、Laravel Mixを用いてすぐにビルドし動くコードを出力する事ができます。

（デフォルトはVue.jsセッティングになっていて、Reactを使う場合は切り替えが必要です。）

Vue.jsを動かす為のセッティング

それでは設定を行っていきます。まずは、依存パッケージをインストールします。

Laravelのルートディレクトリへ移動し、npmでインストールします。

# Laravelルートディレクトリへ移動
cd /path/to/laravel

# 依存パッケージのインストール
npm install

まずはこれでLaravel Mixを用いたビルドが行えるようになります。

まだ何も開発していませんが、ビルドしてみます。

# Laravelルートディレクトリへ移動
cd /path/to/laravel

# フロントエンドのビルド
npm run dev

ビルドが正常に完了すると、以下のような表示になります。

  DONE   Compiled successfully in 5371ms

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

Vue.jsを使った表示

次に、実際にVue.jsで書いたコードをLaravelで表示してみます。

ところが、コードを書かなくてもサンプルが既にLaravel内に用意されているので、まずはそれを利用して表示させてみます。

サンプルコードは、SFC（単一ファイルコンポーネント）で提供されています。

laravel/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>

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

ありがたいことです。ではこれを表示させましょう。

まずは表示用に適当なビューを用意します。

laravel/resources/views/sample.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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Title</title>
</head>
<body>
<h1>sample</h1>
<div id="app">
    <example-component></example-component>
</div>

<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>

ポイントは３つです。

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

CSRFトークンをhead内metaタグにセットしています。

<div id="app">
    <example-component></example-component>
</div>

Vueで描画する領域としてdivタグを設置し、id名を「app」とします。

ExampleComponentを表示するため、example-componentタグを設置します。

<script src="{{ asset('/js/app.js') }}"></script>

ビルドされ出力されるapp.jsを読み込みます。

最後に、ルーティングです。

laravel/routes/web.php

Route::get('/sample', function () {
    return view('sample');
});

ではブラウザからアクセスして確認してみます。

Vue.js表示確認

ExampleComponentからの表示が確認できました。

Vue.jsで実装した機能を動作させる

さすがにサンプルコードを表示させただけでは手応えも薄いと思うので、一度はきちんとコードを書いて表示させてみます。

まずはこちらもSFCを作成します。

laravel/resources/js/components/SampleComponent.vue

<template>
    <div>
        <p>
            Count : <span :class="numberClasses">{{ number }}</span>
        </p>
        <button @click="countDown">−１</button>
        <button @click="countUp">＋１</button>
    </div>
</template>

<script>
export default {
    name: "SampleComponent",
    data () {
        return {
            number: 0
        }
    },
    computed: {
        numberClasses: function () {
            return {
                'positive': (this.number > 0),
                'negative': (this.number < 0)
            }
        }
    },
    methods: {
        countDown: function () {
            this.number--
        },
        countUp: function () {
            this.number++
        }
    }
}
</script>

<style scoped>
    p {
        margin: 10px;
    }
    .positive {
        color: blue;
    }
    .negative {
        color: red;
    }
</style>

簡単なカウントアップ・ダウンのコンポーネントを書きました。

次に、Vueアプリケーションにこのコンポーネントを登録し、動作するようにします。

app.jsに一行追加します。

laravel/resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

// 追加
Vue.component('sample-component', require('./components/SampleComponent.vue').default);

const app = new Vue({
    el: '#app'
});

最後に、Bladeテンプレート（ビュー）の方でSampleComponentを表示するようにします。

laravel/resources/views/sample.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">
    <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Title</title>
</head>
<body>
<h1>sample</h1>
<div id="app">
    <sample-component></sample-component>
</div>

<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>