前提・実現したいこと
Laravel5.6で、Vueの導入をしたい
view/home.blade.phpに書いたサンプルコード
<example-component></example-component>
の中身を表示したいです
発生している問題・エラーメッセージ
全く表示がされない、{{}}で囲んだ変数は、@をつけても変数の中身が表示されない
※追記
TypeError: undefined is not an object (evaluating 'window.Laravel.csrfToken')
というのが、index.jsにあると書かれていました
app.blade.phpのヘッダー内に、下記のコードは一応入れてあるのですが、これでは足りないのでしょうか?
<!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}">
該当のソースコード
<div id="app"> <example-component></example-component> </div> <script src="/js/app.js"></script>
サンプルコードをそのまま書いても全く何も表示されません。
<div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card card-default"> <div class="card-header">Example Component</div> <div class="card-body"> I'm an example component, @{{name}}. </div> </div> </div> </div> <script> var app = new Vue({ el: '.container', data: { name: 'Vue' } }) </script> <script src="/js/app.js"></script> </div>
BladeにExampleComponentの中身をそのまま記述すると、とりあえず下のように表示はできるようになるのですが、試しに{{}}に変数を表示できるか試すと、それも
I'm an example component, {{name}}.
という感じでうまく表示ができません
試したこと
<script src=" {{ mix('js/app.js') }} "></script>
や
<script src="{{ asset('js/app.js') }}"></script>
を、app.blade.phpに追加したり、app.jsの参照先が違うのかと思って
<script src="../js/app.js"></script>
といったように変えてみたりしましたが、変化がありません。一応npm run watchやnpm run devで動かしているので、変更が反映されていないことはないと思います。
他にサンプルコードの表示ができないといった記事が少なく、どうすれば良いのかがわかりません。
補足情報(FW/ツールのバージョンなど)
Laravel5.6.23
Dockerを使っています
インストールしたLaravelのpackage.jsonに記述されているバージョン
"axios": "^0.18",
"bootstrap": "^4.0.0",
"popper.js": "^1.12",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"