web-dev-qa-db-ja.com

Vue / Vuetify-不明なカスタム要素：<v-app>-コンポーネントを正しく登録しましたか？

VueとVuetifyが初めてです。両方をチェックするクイックアプリを作成しました。しかし、私は最初は問題に直面しています。 vueは、ドキュメントに記載されているすべての手順を実行しても、vuetifyコンポーネントを識別できません。エラーは以下のようなものです-

vue.runtime.esm.js？ff9b：587 [Vue警告]：不明なカスタム要素：-コンポーネントを正しく登録しましたか？再帰的なコンポーネントの場合、「名前」オプションを必ず指定してください。

で発見

---> src\App.vue

サンドボックスでコード全体にアクセスできます https://codesandbox.io/s/40rqnl8kw

javascriptvue.jsvuetify.js
10
indusBull

操作の順序に問題がある可能性があります。たとえば、Vueを使用するように指示する前に、v-appコンポーネントを使用する独自のAppコンポーネントを定義しているので、Vueは、独自のカスタムv-appコンポーネントを使用していることを前提としています。

Vueインスタンスを開始する前にVue.use(Vuetify)を配置します（Vuetifyコンポーネントを必要とするnew Vue()を介して、または<script>タグの直後のコンポーネント定義自体に配置します単一ファイルコンポーネント内でのVueおよびVuetifyのインポート複数のVue.use(Vuetify)ステートメントがある場合でも、最初のステートメントのみが何もしないので心配する必要はありません。

操作順序の修正の例を次に示します。 https://codesandbox.io/s/m9jpw517op

将来リンクが壊れた場合に備えて、ここでコードスニペットを提供するために：

Original-Vue.use()はnew Vue()の前に呼び出され、エラーが発生します。

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

Vue.use(Vuetify);

Fix-new Vue()の後にVue.use()を呼び出すと、Vueが依存関係を正しく解決できます。

Vue.use(Vuetify);

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

編集：この回答は、将来の読者を誤解させる可能性のある不正確さを修正し、簡単にするためにコードサンプルの変更を最小限に抑えるために、受け入れられた後に修正されました。 codesandboxウェブサイトが利用できなくなった場合、問題の修正がアクセスできなくなることを避けます。

13
B. Fleming

別の考えられる問題は、アラカルトを有効にしている場合、含めるコンポーネントもすべて指定する必要があることです。

編集：VuetifyLoaderが自動的にあなたのためにそれを行うように見えます

https://vuetifyjs.com/en/framework/a-la-carte

import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar,
  VFadeTransition
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    VFadeTransition
  },
  directives: {
    Ripple
  }
})
0
Zaptree

Googleから来ている場合：私にとってはv1からv2への変更が壊れていたため、ほとんどのCodepenの例は役に立たなくなりました。ナビゲーションドロワーを備えた非常にシンプルなVuetifyアプリを再実行するには、これを変更する必要がありました。

remove toolbar from <v-app toolbar>
replace v-toolbar with v-app-bar
replace v-app-bar-nav-icon with v-app-bar-side-icon
replace v-app-bar-title with v-toolbar
replace v-list-tile to v-list-item

replace all flat with text

たぶんこれは誰かを助ける。

0
dirkk0