Laravel + Vue.js の併用の仕方について

Question

やりたいこと

Laravel5.5とVue.jsを使用してアプリケーションを作成しています．
LaravelのBladeファイルの中でVue.jsを使うやり方がわからないので質問させていただきます．．

該当のソースコード

// news.blade.php

@section('content')
    <div id="news">
        <button v-on:click="test">Test</button>
    </div>

    <script>
        var news = new Vue({
            el: '#news',
            methods: {
                test: function () {
                    console.log("Hello World!");
                }
            }
        })
    </script>
@endsection

エラーメッセージ

Uncaught ReferenceError: Vue is not defined

補足情報（FW/ツールのバージョンなど）

Laravel: 5.5
Vue.js: 2.5.7

npm install

によりvue.jsが入っていることは確認しています．

どのように修正すればいいでしょうか？

Answer 1

少なくともBladeファイル内で使う場合はjs/app.jsを読み込んでいる箇所より後にスクリプトを書く必要があります。（厳密にはwindow.Vue = require('vue');より後）

基本的にはスクリプトをビューに書かずにresources/assets/js/app.js の例にあるようにコンポーネントの形で追加し、Webpack を使ってコンパイルを行うことになると思います。

Laravel には最初から example-component が登録されているのでビューの何処かに<example-component></example-component> と書けば文字が表示されるので試してみると流れがつかみやすいかもしれません。

【resources/assets/js/app.js の抜粋】

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

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

https://laravel.com/docs/5.5/mix

Comments

[arw.tyx-out_mz]

基本的にはスクリプトをビューに書かないと言うことですが，jQueryのようにscriptタグの中からhtmlエレメントを操作するということはしないのですか？

また，例えば2つのbladeファイルがあり，それぞれに別々のコンポーネントを表示したい場合は，jsファイルを2つ作成して，その作成したファイルをwebpack.mix.jsに追加するという形ですか？

[workr]

Vueは文法的に新しい書き方がされているため古いブラウザでは正常に動作しないことがあります。そのため、Webpackの中で使われているBabelを通して古いブラウザにも対応する形に変換するのが一般的です。
ビュー内のscriptタグ内に直接書いたVue関係のスクリプトは最新のブラウザでしか処理できない可能性があるため避けたほうが良いと思います。jQueryなどレガシーブラウザにも対応しているものに関してはビュー内に直接書いてしまっても問題は起きにくいです。webpack.mix.js に追加するよりも resources/assets/js/app.js に require() などを使って読み込ませるほうが１つのファイルに纏められて良いと思います。

[arw.tyx-out_mz]

なるほど......

それではlaravel + vue.jsで開発する時には，SPA的にコントローラーからAPI経由でデータをvue.jsに渡すのが一般的と言うことですか？
今はコントローラーからbladeに渡して，それをVue.jsで扱えたらいいなと思っているんですが....

resources/assets/js/app.jsにまとめられると言う部分がいまいちわからないです....

例えばApp.blade.php と Hoge.blade.phpという2つのファイルがあったとして，それぞれ
App.blade.php
```
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
```

Hoge.blade.php
```
<div id="hoge">
<hoge></hoge>
</div>
<script src="{{ mix('js/app.js') }}"></script>
```

という内容だった時に，resources/assets/js/app.jsに
```
require('./bootstrap.js');

window.Vue = require('vue');

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

const hoge = new Vue{(
el: '#hoge'
)};
```

とすれば別々にマウントすることができるということですか？
長くなってしまいすみません．．．

[workr]

Vue.jsの強みを最大限に利用するならaxios等と組み合わせてAPIから情報を取得する形になると思います。

小規模なものであれば提示していただいたコードのように「el」をページごとに変えることでも実現できると思いますが、app.js の肥大化に注意が必要です。可能ならコンポーネント(https://jp.vuejs.org/v2/guide/single-file-components.html)の利用も検討してみて下さい。
上記コードではコンポーネントを使っていないため <hoge></hoge> の箇所は不要となっています。
コンポーネントを利用する場合は「el」を変えずに Vue.component() でコンポーネントを登録し、使用したい箇所に <my-component></my-component> などのタグを挿入します。