• 2021/12/17
• 5分

LaravelでVue Routerを組み込む方法とは？初心者向けに1から解説！

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

PHPのフレームワークであるLaravelとJavaScriptのフレームワークVue.jsを連携させてアプリケーションを作る過程でライブラリVue Routerを組み込む方法をまとめていきたいと思います。

Vue Routerとは？

Vue Routerとはルーティングと呼ばれるURLに応じて呼び出す処理を振り分けることができる機能を実装できるVue.jsのライブラリです。ルーティング機能を導入することで通常のサイトのようにURLに応じてファイルを振り分けて変移させるのではなく、ファイルはそのままコンポーネントだけを切り替えるSPA(Single page application)と呼ばれる構成で作られたアプリケーションの作成が簡単に行えるようになります。

Laravelにはデフォルトでルーティング機能(routes>web.php)が備わっていますがVue.jsで作成したコンポーネントを呼び出すにはVue Routerを使うのが簡単で便利です。

LaravelとVue Routerを導入するための前提条件

ではここからは流れに沿ってやるべきことを順番に解説していきたいと思います。まずは「LaravelとVue Routerの連携」する前に準備しておくべきことを整理しておきます。

ターミナルに組み込むべき前提条件

• composerのインストール
• Node.jsのインストール

LaravelやVue Routerを組み込むにはコマンドライン(Macならターミナル)に上記のバージョン管理ソフトをインストールする必要があります。未導入であれば下記記事を参考に導入しておいてください。

LaravelとVue Routerを連携する流れ

まずは流れを確認してみます。今回はLaravelプロジェクトを作成するところから見ていきます。

1. Laravelプロジェクトを作成
2. Laravel/uiを組み込む
3. Vue.jsを組み込む
4. Vue Routerを組み込む
5. ファイルを編集
6. ビルド

流れはこのような感じです。基本的には5番以外はコマンドラインでの操作になっていきます。

最初にLaravelのプロジェクトを作成します。作成したいディレクトリ(desktopなど)に移動した後任意のプロジェクト名を指定して作成します。

$ laravel new プロジェクト名
$ cd プロジェクト名

作成したらプロジェクト内にcdコマンドを使ってカレントディレクトリ(現在アクティブになっているフォルダ)を移動させておきます。

続いてLaravel/uiをインストールします。Laravel/uiとはフロントエンドフレームワークであるVue.jsやBootstrap、reactをLaravelで使用するようにできるライブラリです。

$ composer require laravel/ui 

Laravel/uiがインストールできたらスカフォールド(意味:足場→フレームワークのどれを使うか)を設定します。今回はVue.jsなので以下のコマンドを実行してVue.jsを使えるようにします。認証機能も使いたい場合はオプション(--auth)も追加します。

$ php artisan ui vue
$ php artisan ui vue --auth

次にVue Routerライブラリを導入します。導入するのは以下のコマンドを実行するだけです。npmはNode.jsをインストールすると使えるようになるコマンドです。

$ npm install vue-route

ここまでで必要なファイルが自動生成されたり、基本的な設定部分が終了しました。ここからは実際にVue Routerのルーティング機能が動作するようにファイルを編集していきたいと思います。

Vue Routerを動作させる方法

やらなければいけないこと

• router.jsファイルの設置&記述
• app.jsとリンク
• Web.phpの編集
• ビルド

最低限以上の設定は必要です。では実際に動作するようにコードを記述してみます。今回はデフォルトで入っている「ExampleComponent.vue」をルーティングを使って表示させてみたいと思います。

現状ではプロジェクトのURLにアクセスすると自動で「welcome.blade.php」が表示されるようになっているのでそのまま流用していきたいと思います。

その前にLaravelプロジェクト内の関係するファイル構造を確認してみます。

├── Laravelプロジェクト
│  ├── public
│  ├── resources
│  │    ├── css
│  │    ├── js
│  │    │     ├── Components
│  │    │     │     └── ExampleComponent.vue
│  │    │     ├── app.js
│  │    │     └── router.js // ☜ここに作成する
│  │    └── views
│  │           └── welcome.blade.php
│  ├── routes  
│  │    └── web.php
│  └── src
│        └── App.Vue

Vue Routerを使用するためにはまず専用のファイルを作って管理した方がわかりやすいので「resource」＞「js」の中にrouter.jsを作成し以下のコードを記述します。それ以外は既に存在するはずなので既存のコードに追記していきます。

resource＞js＞router.js

import Vue from "vue";
// Vueを読み込む
import Router from "vue-router";
// Vue Routerを読み込む
import ExampleComponent from "./components/ExampleComponent"
// Componentsを読み込む

Vue.use(Router)

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

ここではまず上部で「Vue」と「Vue Router」をimportで使用可能にしています。ここの仕組みがまだわかっておりませんがfromの後に記述するのはどこの階層においても"vue","vue-router"でよさそうです。

mode: 'history'とすることでURLに#(ハッシュタグ)がつかなくなります。その後のroutesに渡した値でコンポーネントをURLに紐づけています。

resource＞js＞app.js

require('./bootstrap');

window.Vue = require('vue').default;

import router from "./router.js"; // 追記
// App.vueのパスを調整
import App from "../../src/App.vue";

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

次はapp.jsに追記していきます。ここでは「router.js」からexport default new Routerでエクスポートしたデータを受け取るためのコードとインスタンス化(Vueを起動)させたときにrouterを使用できるように組み込んでいます。

src＞App.vue

<template>
<div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name:'app'
}
</script>

App.vueは上記のようにしておきます。Vue Routerを使って渡されたコンポーネントを表示させるのは<router-view></router-view>です。このコードを記述した部分に指定のURLに紐づいたコンポーネントが展開されます。

routes＞web.php

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

最後にLaravelのルーティング機能を司る「web.php」にURLの末尾がなんであれVue Routerを介すように全てwelcome.blade.phpを表示させるようにしておきます。

これでLaravelとVue Routerを連携することができているはずです。

ここでURLにアクセスする前に

URLにアクセスしたときに「ExampleComponent」が表示されることを確認してみてください。

全ての編集が完了したら編集したファイルを使用できるようにビルドしないといけません。ビルドとはソースコードに問題がないかを解析かつ実行できる形のファイルに変換し、組み立てることを指します。コマンドラインに以下のコードのどれかを実行することでビルドすることができます。

// 開発用
$ npm run dev 
// 常時
$ npm run watch
// 本番用
$ npm run prod 

Vue Routerを使用するときに起きたエラーと解決法

私が苦しんだのはビルドしようとしたときに起きた以下のようなエラーでした。

$ npm run dev 
ERROR in ./resources/js/router.js 2:16-54
Module not found: Error: Can't resolve 'vue-router' in '/Applications/MAMP/htdocs/プロジェクト名/resources/js'

webpack compiled with 1 error

このエラーはimport Router from "vue-router";部分の「'vue-router'」が存在しないときに発生するエラーだったようです。このときデベロッパーツールでも以下のようなエラーを吐いていました。

Uncaught Error: Cannot find module 'vue-router'

「'vue-router'」が存在しないということなのでVue Routerを再度インストールすることで解決することができました。

$ npm install vue-route

私は上記コマンド後にdesktopに作成したLaravelアプリをMAMPの中に移動させたことでエラーが起きたのではないかと思っています。

私もまだまだ初心者なので至らぬ点や間違っているところがあると教えていただけると助かります。

ご覧いただきありがとうございました。