"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

はじめてLaravel6.0:Vue.jsコンポーネントを使ってみる/Windows10

今回は、Laravel6.0でVue.jsのコンポーネントを使用するやり方を確認します。

f:id:arakan_no_boku:20191003220222p:plain

 

はじめに

 

Laravel6.0をインストールしただけでは、Vue.jsは使えません。

使えるようにするおススメの方法は、Node.jsのインストール済の環境で「php artisan ui vue --auth」を実行することです。

arakan-pgm-ai.hatenablog.com

このコマンド「php artisan ui vue --auth」は「認証画面」を使えるようにするものですが、同時に「Vue.js」もインストールしてくれます。

ここから先の説明は、上記の記事の内容が実行済で、Vueが使えるようになっている環境であるということを前提にします。

 

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」付きなら、上の方に書いても大丈夫です。

qiita.com

とはいえ。

実際は、「php artisan ui vue --auth」を実行済なら、何もしなくて良いです。

コマンド実行時に生成される「layouts」フォルダの「app.blade.php」内には、すでに上記が組み込まれているからです。

なので。

そこを消してないなら、Laravelの付属サンプル「ExampleComponent.vue」は以下のようにするだけで動きます。

@extends('layouts.app')

@section('content')

    <example-component></example-component>

@endsection

動かして、こんな感じの表示がでれば、Vue.jsコンポーネントは動いてます。

f:id:arakan_no_boku:20191024235407p:plain

 

Vue.jsコンポーネントをひとつ作ってみる

 

さて。

サンプルが動いたのを確認できたら、ひとつコンポーネントを作ってみます。

今回は、超簡単に「今日の日付を表示する」だけのコンポーネントにします。

新たにコンポーネントを作成して、動かす手順は。

  1. Vue.jsでコンポーネントを作る
  2. app.jsに定義を追加する。
  3. JavaScriptコードをコンパイルする
  4. 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

うまくいくと、こんな画面になります。

f:id:arakan_no_boku:20191026001642p:plain

そうでない場合はエラーメッセージが表示されます。

そうなると、修正してコンパイルしなおします。

エラーメッセージが英語だったり、ちょっと慣れないと見づらいですが、ここは頑張るしかないです。

 

bladeに組み込んで使う

 

コンパイルが通ったら、使えるようになります。

早速、適当な入力画面に追加して動かしてみます。

確認のためにわざわざ画面を作るのは面倒なので、組み込むベースになる画面は以下の記事で作ったものを使います。

arakan-pgm-ai.hatenablog.com

この入力画面に

<div class="row">
  <today></today>
</div> 

を適当なところにおいて、表示確認してみます。

XAMPPでMySQLサーバーを起動して。

ビルトインサーバーを「php artisan serve」で動かして。

ブラウザで、URL「http://localhost:8000/dummy」にアクセスします。

で・・。

表示されると、こんな感じ。 

f:id:arakan_no_boku:20191026000233p:plain

今日の日付が表示されました(笑)

とりあえず、Vueコンポーネントを新規に作成して、bladeテンプレートに組み込んで使うという最低限のことは確認できました。

今回はこんな感じですかね。

ではでは。