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

公開日 2019.5.11

カテゴリ：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>

ポイントは３つです。

<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');
});

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

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>

これで実装と準備は終わったので、npm run dev でビルドして、ブラウザから確認してみます。

Vue.js で実装したフロントエンドが Laravel 上で動作している事を確認できました。

カウントアップ・ダウンの動作も問題ないようですね。

まとめ

以上で作業は修了です。私の記憶では、まだ Vue.js があまり広まっていない頃から Laravel ではサポートを開始していました。そんな Vue.js ももう確固たるポジションを確立していて、Laravel陣営の先見の明たるや。です。

Laravel＆ Vue.js の組み合わせはおすすめです。是非試してみてください。
サンプルコード