動画のとおり動かなかったところについてまとめました【Vue.js + Firebaseで作るシングルページアプリケーション】
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
目次
はじめに
Udemy の教材でうまく自分の手元で動かなかった時の解決方法についてまとめた記事となります。
→ Vue.js + Firebase で作るシングルページアプリケーション
この教材は、Vue.js の入門にはちょうどよく、５時間ほどで網羅的に学ぶことができるので自分はやって良かったと思っています。
教材の最後の方では、アドレス帳のアプリ作成を題材に作ることができますので、手早く要点を抑えて学びたい人に向いていると思います。
Unknown custom element: - did you register the component correctly?
講座４４〜４５のサイドメニューコンポーネントを作成するとき、以下のようなエラーになりました。
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <v-list-tile> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
found in
---> <SideNav> at src/components/SideNav.vue
<VApp>
<App> at src/App.vue
<Root>このエラーはコンポーネントが正しく登録されていないときに発生するエラーです。
この教材で使われている Vuetify は、バージョンが 1 から 2 になった際に、コンポーネントの名前が結構変わっているため教材の通り書くとコンポーネントが見つからないというエラーが発生します。
v-list-tile → v-list-item
v-list-tile-action → v-list-item-action
v-list-tile → v-list-item
v-list-tile-action → v-list-item-action
v-list-tile-avatar → v-list-item-avatar
v-list-tile-content → v-list-item-content
v-list-tile-title → v-list-item-title
v-list-tile-sub-title → v-list-item-subtitle
The avatar prop has been removed
左が昔のコンポーネント名で、右が現在のコンポーネント名みたいです。
また、
v-toolbar-side-icon → v-app-bar-nav-icon
に変更されているので注意が必要です。
'app' has been removed
[Vuetify] [BREAKING] 'app' has been removed, use '<v-app-bar app>' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guideというエラーがでて怒られました。
<v-toolbar app>→<v-app-bar app>
と変更する必要があります。
<v-app-bar app></v-app-bar>パッケージの不足によるエラー
講座 56 あたりで、パッケージが足りなくてエラーになるかもしれません。
そのときは、ターミナルのエラーをよく読んで、不足しているパッケージをインストールする必要があります。
npm install `package-nameがここに入る`で、必要なパッケージを入れましょう。
自分は、firebase を導入直後、完全に画面が表示されなくなったので、このようにして解決しました。
main.js に記載する内容の変更
vuetify は最新バージョンでは、
new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount("#app")このように、記載してあげる必要があるようです。
下記 URL に書いてあります。
左上のメニューボタンの表示のバグ
自分が解決した方法
public/index.html の
<head></head>に
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>を書き込んで解決しました。
まとめ
以上です。誰かの参考になれば幸いです。
もしかしたら動画の方でしっかりと修正が入っているかもしれないので、この記事を元にバグだらけという判断材料にしないでいただければ幸いでございます。
