LaravelでVueComponentを使おうとするとエラーが出る。

Question

実現したいこと

componentを使用してリアクティブなページを作りたい

エラーメッセージ

vue.js:634 [Vue warn]: Unknown custom element: <config-index-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

やったこと

表示したい場所に

<config-index-component></config-index-component>

を書いて
resources/js/app.jsに

Vue.component('config-index-component', require('./components/ConfigIndexComponent.vue').default);

を追記して
resources/js/components/ConfigIndexComponent.vue
を作成して

</body>の直前に ```html <script src="{{ mix('js/app.js') }}"></script> ``` を追記してあります。 一応表示自体はされるのですが、エラーメッセージが出てしまいます。 解決方法のわかる方がいたら、ご回答よろしくお願いします。 ### 追記 resources/js/components/ConfigIndexComponent.vue ```vue <template> ... </template> <script> export default { name: "ConfigIndexComponent", ... } </script> ```

Comments

[FKM]

.vueファイルの中身の提示お願いします。動いているけど警告文が出ているのは、どうも定義抜けの気がします。

[yakito-morokosi]

追記させていただきました。
必要ないかな？と思ったところは省いています。
もし、他にも記入した方がいいところがあったら言ってください！

Answer 1

Vue.component('config-component', 〜
↓
Vue.component('config-index-component', 〜

ではないでしょうか？

Comments

[yakito-morokosi]

ご回答ありがとうございます。
見直して見たところ、jsファイルではconfig-index-componentになってました。質問に書くときに間違えたみたいです。直しておきます。
紛らわしいミスをしてしまいすみません。

Answer 2

これでしょうか？

Vue.js Unknown custom element の原因と対策　コンポーネントを登録　命名ケースに注意

ケバブケースを使わないとエラーを吐くようなことを表記しています。

Comments

[yakito-morokosi]

ご回答ありがとうございます。
質問する前に、私もそのサイトをみたのですが、参照する時にケバブケースを使っているので、多分その点は大丈夫だと思います。

[FKM]

だとすると、これですかね？
https://stackoverflow.com/questions/39382032/vue-js-unknown-custom-element/39382472103

You forgot about the components section in your Vue initialization. So Vue actually doesn't know about your component.

だいたいに訳すると、「そのコンポネントを初期化した？」ってことです。

[yakito-morokosi]

返信遅れてすみません！
何度もアドバイスをありがとうございます！
laravelではapp.js内に追加したものはview全体で使えるようなので大丈夫だと思います。

[yakito-morokosi]

bladeファイル内でVueを使っていたのをコメントアウトしたらエラーが出なくなりました。
なぜそれでエラーになっていたのかはわかりませんが、一応治りました!
ありがとうございました！