Vue

UdemyのVue.js+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)

<h4><code>v-list</code> et al</h4>
<ul>
  <li>
    Many components have been renamed
    <ul>
      <li><code>v-list-tile</code><code>v-list-item</code></li>
      <li><code>v-list-tile-action</code><code>v-list-item-action</code></li>
      <li><code>v-list-tile-avatar</code><code>v-list-item-avatar</code></li>
      <li>
        <code>v-list-tile-content</code><code>v-list-item-content</code>
      </li>
      <li><code>v-list-tile-title</code><code>v-list-item-title</code></li>
      <li>
        <code>v-list-tile-sub-title</code><code>v-list-item-subtitle</code>
      </li>
      <li>The <strong>avatar</strong> prop has been removed</li>
    </ul>
  </li>
</ul>

左が昔のコンポーネント名で、右が現在のコンポーネント名みたいです。

また、どこのバージョンでの変更かわかりませんが、

v-toolbar-side-icon

↓

v-app-bar-nav-icon

に変更されています。

‘app’ has been removed

[Vuetify] [BREAKING] 'app' has been removed, use '&lt;v-app-bar app&gt;' 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></v-app-bar>

で書き直したら動きました。

しかし、TOGGLE ボタンが消えます笑

これは解明できないですが、今回は無視して先に進めます。

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

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

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

npm install

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

自分は、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"
/>

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

まとめ

感想、間違っているところとかご指摘あれば TwitterDM ウェルカムなのでお待ちしております!