LaravelのプロジェクトでVue.jsを連携させる方法【入門】

2021年6月9日2022年8月2日

PHPのフレームワークの中でも代表的な「Laravel」があります。

また、モダンなフロントエンドのフレームワークでは「Vue.js」や「React」、「Angular」などが大変人気で様々なプロジェクトでの導入が進んでいます。

この記事ではバックエンドに「Laravel」、フロントエンドには「Vue.js」を使用してプロジェクトを作成する方法を紹介していきたいと思います。
LaravelではVue.jsを導入しやすく、LaravelとVue.jsの組み合わせは実務のプロジェクトでもよく見受けられるので、ぜひ導入できるようになりましょう。

Laravelのプロジェクトを作成する

Laravelのインストール

まずはLaravelのプロジェクトを作成していきましょう。

下記のコマンドでLaravel7の「laravel-vue-project」プロジェクトを作成できます。

composer create-project "laravel/laravel=7.*" laravel-vue-project --prefer-dist

「Application key set successfully.」と表示されていれば、無事にプロジェクトが作成できています。

cdコマンドでプロジェクトのルートディレクトリに移動しておきましょう。

cd laravel-vue-project

ここでルートディレクトリに存在するpackage.jsonを確認しましょう。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        ...省略...
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

package.jsonに既に「vue」と「vue-template-compiler」が記述されていれば、「Vue.jsをインストールする」まで読み進めてください。記述されていなければ、後述のコマンドでpackage.jsonに「vue」と「vue-template-compiler」を導入していきましょう。

laravel/uiのインストール

「Laravel-ui」というパッケージをcomposerコマンドでインストールしていきます。

Laravel-uiとはLaravel6から入っているフロントエンドフレームワークを使うことができるライブラリです。

composer require laravel/ui:^2.4

Laravel7でプロジェクトを作成しているので、バージョンを指定してインストールする必要があります。

「Package manifest generated successfully.」と表示されていれば、無事にインストールできています。

vueスカホールドのインストール

次にvueのスカホールドを選択します。

php artisan ui vue

「Vue scaffolding installed successfully.Please run “npm install && npm run dev” to compile your fresh scaffolding.」と表示されていれば、無事にスカホールドがインストールされています。

ここまでくれば、package.jsonに「vue」と「vue-template-compiler」が追記されているはずです。確認してみてくださいね。

それではLaravelにVue.jsをインストールしていきましょう。

Vue.jsをインストールする

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

下記コマンドでpackage.jsonに記述されているパッケージをインストールすることが出来ます。

npm install

ルートディレクトリにnode_modulesがインストールされます。

プロジェクトのビルド

インストールしただけではVue.jsを使うことはできません。

下記のコマンドでプロジェクトをビルドする必要があります。

npm run dev

これでLaravelでVue.jsを使うことための下準備が完了しました。

LaravelでVue.jsを使うことが出来るようになっていますので、使っていきましょう。

Vueコンポーネントを使う

それでは、LaravelでVueコンポーネントを使っていきましょう。

Laravelのローカルサーバを起動しましょう。

php artisan serve

localhostの8000番ポートで立ち上がります。

上記のような画面が表示されていれば、無事にローカルサーバが起動しています。

この画面にVueコンポーネントを組み込んでいきましょう。

サンプルVueコンポーネントの確認

LaravelのプロジェクトにはサンプルのVueコンポーネントが準備されています。

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

Vue.jsのコードが記載されていますね。

基本的にはタグを出力するだけの単純なVueコンポーネントです。

また、/resources/js/app.jsの確認も確認しましょう。

require('./bootstrap');

window.Vue = require('vue');

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

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

このjsファイルでVueコンポーネントタグを使用できるように定義しています。

ExampleComponent.vueをappタグの中にexample-componentタグで配置することで使用できます。

それではサンプルのコンポーネントを組み込んでいきます。

CSRFトークンの挿入

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

Laravelではセキュリティの関連からVue.jsを利用する場合、CSRFトークンを追加することを推奨しています。

CRSF対策を一から組み込もうとしたら、かなり大変ですが、標準で備わっているのはありがたいですね。

CSSの読み込み

<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">

app.cssというcssファイルを読み込んでいますが、見慣れない書き方かと思います。

これはLaravelでVue.jsを追加した際には、resourcesとpublicの２つのフォルダにcss/app.cssのファイルが存在します。

mix関数では上記２つのフォルダのcss/app.cssファイルを良い感じに１つにまとめて読み込んでくれる便利な関数です。

スクリプトのロード

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

cssファイル同様にresourcesとpublic直下に存在するjs/app.jsを１つにまとめて読み込みます。

Vue.jsのコンテナ

<div id="app">
</div>

Vueのコンポーネントを読み込むためのコンテナタグをid属性をappで用意します。

コンポーネントタグ

<example-component></example-component>

ExampleComonent.vueを組み込むためのコンポーネントタグです。Vue.jsのコンテナの中に記述しましょう。

Laravel+Vue.jsのプロジェクト完成

上記のコードをまとめた記述を確認しましょう。

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

        <title>Laravel</title>

        ...省略...

        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
    </head>
    <body>
        ...省略...

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Docs</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://blog.laravel.com">Blog</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://vapor.laravel.com">Vapor</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
                
                <div id="app">
                    <example-component></example-component>
                </div><!-- #app -->
            </div>
        </div>

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

これでLaravelのプロジェクトにVue.jsを組み込むことができました。

画面を確認してみましょう。