ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

UdemyのVue.js+firebaseやってます。vuetifyの変更があるのでメモ。

後日まとめるようのメモとして残しておきます。

https://www.udemy.com/vuejs-firebase/

この講座でvue.jsに初挑戦していますが、最新バージョンでチャレンジすると、vuetifyの仕様変更(名称等)によって、エラーが出る部分がるのでまとめておきます。

最新バージョンでやらないと気が済まない方々はおそらくエラー吐きますので、参考にしてください。

 

講座44〜45のサイドメニューコンポーネントを作成する段階で、

下記の変更点がもろにぶち当たります

エラーコード デベロッパーツールで❌を押すと・・・

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に設定されたコンポーネントを使うイメージを理解しました(遅い)

githubから引用します(https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide)

v-list et al

  • Many components have been renamed
    • 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

に変更されています。

 

[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>のappの部分が削除されたんですかね。

<v-app-bar app>を使ってくださいと出ています。

ただ、<v-app-bar app>で書き直すと、なぜか分からないですが、TOGGLEボタンが消えます笑

これは解明できないですが、TOGGLE自体はいずれ吸収されるはずなので今回は無視して先に進めます。

 

講座56のFirebaseを導入するあたりで、

npmパッケージが足りなくてエラーでるかもしれません。

そのときは、ターミナルのエラーをよく読んで、

npm install するように指示があればしましょう。

自分は、firebaseを導入直後、完全に画面が表示されなくなったので、このようにして解決しました。

 

main.jsに記載する内容の変更

vuetifyは最新バージョンでは、

new Vue({ router, store, vuetify, render: h => h(App) }).$mount(‘#app’)

このように、記載してあげる必要があるようです。下記URL参照。

https://vuetifyjs.com/ja/getting-started/quick-start

ざっとメモなので、全て終わったらちゃんとまとめます。

 

左上のメニューボタンの表示については、public/index.html 内に

を書き込めばいけました。