ホーム > Vue > UdemyのVue.js＋firebaseやってます。動画のとおり動かなかったところについてまとめました
Vue

UdemyのVue.js＋firebaseやってます。動画のとおり動かなかったところについてまとめました

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. はじめに
  2. 講座４４〜４５のサイドメニューコンポーネントを作成するとき
  3. 'app' has been removed
  4. 講座５６の Firebase を導入するあたりで
  5. main.js に記載する内容の変更
  6. 左上のメニューボタンの表示がバグっている
  7. まとめ
オススメ本

はじめに

Udemy のこの講座で vue.js に初挑戦していたときの記事となります。

  • この記事は、動画教材のバージョンより新しいバージョンでチャレンジすると、vuetify の仕様変更（名称等）によって、エラーが出る部分が出たのでそれについてまとめた記事となっています。

ところどころ変な文章があったので、最近読みやすいようにリライトしました。

⇨この動画教材のやつです

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

講座４４〜４５のサイドメニューコンポーネントを作成するとき

以下のようなエラーになりました。

デベロッパーツールで確認すると（右クリック検証 ⇨ コンソール）

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 という UI フレームワークの、

  • コンポーネントが名前が変わっていて、見つからない

ことが原因です。

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>

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

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

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

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

するように指示があれば、

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 ウェルカムなのでお待ちしております！