Vue.jsでタグが読み込めない

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
LaravelのbladeにVue.jsのコンポーネントを導入したいと思っています。

発生している問題・エラーメッセージ

    <div id="app">
      <example-component></example-component>
    </div>

のタグがそのままHTMLとして出力されてしまい、Vueアプリとして動作しません。
（本来はVue.componentのtemplateタグ内に置き換わらないとおかしい）
ExampleComponent.vueをリネームしてもエラーも起きず全く読もうとしてくれません。
npm run devはビルド成功になります。

エラーメッセージは出ていません。
apacheとphpのerror_logにも出力されていません。

どうしてblade側のidとnew Vueが結びつかないのか分かる方おられないでしょうか？

該当のソースコード

app.js

javascript
1Vue.component('example-component', require('./components/ExampleComponent.vue').default);
2
3/**
4 * Next, we will create a fresh Vue application instance and attach it to
5 * the page. Then, you may begin adding components to this application
6 * or customize the JavaScript scaffolding to fit your unique needs.
7 */
8
9const app = new Vue({
10    el: '#app',
11});
12

blade.php

//head内
  <link rel="stylesheet" href="{{ mix('/css/app.css') }}">

//body
        <div id="app">
          <example-component></example-component>
        </div>

//body閉じタグ直前
  <script src=" {{ mix('js/app.js') }} "></script>

ExampleComponent.vue

//初期状態のまま

試したこと

Vueのライブラリが読めていないのかと思い、CDNをヘッドに入れてみましたが変わりませんでした。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答3件

コンパイルをしてないのでは?
npm run dev を行ってみてください。

投稿2020/09/24 16:37

kai0310

総合スコア2076

misskabu

2020/09/25 13:44

コメントありがとうございます。コンパイルはしていて、successになっています。試しにapp.jsの記述を変えてみるとエラーになるので、コンパイルまでは反応してくれています。ところがHTMLテンプレートでは読もうともしてくれない状態です。

行動規範の内容に同意します

Ctrl + Uではなく、Ctrl + Shift + Iで確認してみてください。（macOSの場合は適時読み替えてください。

投稿2020/09/24 14:51

kyoya0819

総合スコア10429

自己解決

ごめんなさい。自己解決しました。
原因はjavascriptプラグインでカレンダー型日付入力ボックスを読み込んでいたことでした。
理屈はよくわかりませんが、以下の記述を削除したら動きましたので、ライブラリの競合が原因だと思われます。
もしかするとidの競合(id=#appが一般的な変数名で怪しい？)のせいかもしれません。
質問する時点で省略してしまっており、提示した情報だけでは絶対に解決できない質問をしてしまっておりました。
申し訳ありませんでした。コメントいただいた方々、お時間いただきありがとうございました。

投稿2020/09/25 14:27

misskabu

総合スコア28