目次
はじめに
今回は、Laravel6.0でVue.jsのコンポーネントを使用するやり方を確認します。
Laravel6.0をインストールしただけでは、Vue.jsは使えません。
使えるようにするおススメの方法は、Node.jsのインストール済の環境で「php artisan ui vue --auth」を実行することです。
このコマンド「php artisan ui vue --auth」は「認証画面」を使えるようにするものですが、同時に「Vue.js」もインストールしてくれます。
ここから先の説明は、上記の記事の内容が実行済で、Vueが使えるようになっている環境であるということを前提にします。
Bladeテンプレート内でVue.jsを動かす準備
Laravel（正確にはBladeテンプレート内）でVue.jsを動かす手順は以下の通りです。
- <div is="app"></div>内に書く。
- <script src="{{ asset('js/app.js') }}" defer></script>
です。
つまり
<div id="app">
・・この中でVue.jsが有効になる
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
のようにすれば良いということです。
注意点として「app.js」はHTMLパース後に読み込まれないといけないので、よく、</body>の直前くらいに書くように説明されている場合がありますが、上記例のように「defer」付きなら、上の方に書いても大丈夫です。
とはいえ。
実際は、「php artisan ui vue --auth」を実行済なら、何もしなくて良いです。
コマンド実行時に生成される「layouts」フォルダの「app.blade.php」内には、すでに上記が組み込まれているからです。
なので。
そこを消してないなら、Laravelの付属サンプル「ExampleComponent.vue」は以下のようにするだけで動きます。
@extends('layouts.app')
@section('content')
<example-component></example-component>
@endsection
動かして、こんな感じの表示がでれば、Vue.jsコンポーネントは動いてます。
Vue.jsコンポーネントを動かす手順
サンプルが動いたのを確認できたら、ひとつコンポーネントを作ってみます。
今回は、超簡単に「今日の日付を表示する」だけのコンポーネントにします。
新たにコンポーネントを作成して、動かす手順は。
- Vue.jsでコンポーネントを作る
- app.jsに定義を追加する。
- JavaScriptコードをコンパイルする
- bladeに組み込んで使う
です。
Vue.jsでコンポーネントを作る
まず、resources\js\componentsフォルダに以下のようなソースを作り、「TodayComponent.vue」とでも名前をつけて保存します。
TodayComponent.vue
<template>
<div class="col-md-10 text-md-center">
今日は{{ disp }}ですよ。
</div>
</template>
<script>
export default {
data() {
return {
disp: '0:0',
}
},
mounted() {
let d = new Date();
this.disp = d.getFullYear().toString() + "/" + (d.getMonth()+1).toString() + "/" + d.getDate().toString();
}
}
</script>
JavaScriptのDate()で、年月日を取得しているだけの、なんの変哲もない処理です。
app.jsに定義を追加する
作成したVue.jsコンポーネントを「app.js」に登録します。
exsample-componentの例がありますので、それをコピーして、必要な部分を書き直すだけでできます。
今回は、こんな感じです。
Vue.component('today', require('./components/TodayComponent.vue').default);
こうしておくと、「<today></today>」タグで使えるようになります。
JavaScriptコードをコンパイルする
最初、必ずハマりますが（笑）
Vue.jsはソースを修正するだけでは動きません。
必ずコンパイルが必要です。
app.jsに登録しても、コンパイルしていないと認識されません。
コンパイルには、以下を実行します。
npm run dev
うまくいくと、こんな画面になります。
そうでない場合はエラーメッセージが表示されます。
そうなると、修正してコンパイルしなおします。
エラーメッセージが英語だったり、ちょっと慣れないと見づらいですが、ここは頑張るしかないです。
Vueコンポーネントをbladeテンプレートで使う
コンパイルが通ったら、使えるようになります。
早速、適当な入力画面に追加して動かしてみます。
確認のためにわざわざ画面を作るのは面倒なので、組み込むベースになる画面は以下の記事で作ったものを使います。
この入力画面に
<div class="row">
<today></today>
</div>
を適当なところにおいて、表示確認してみます。
XAMPPでMySQLサーバーを起動して。
ビルトインサーバーを「php artisan serve」で動かして。
ブラウザで、URL「http://localhost:8000/dummy」にアクセスします。
で・・。
表示されると、こんな感じ。
今日の日付が表示されました（笑）
とりあえず、Vueコンポーネントを新規に作成して、bladeテンプレートに組み込んで使うという最低限のことは確認できました。
今回はこんな感じですかね。
ではでは。
