web-dev-qa-db-fra.com

Vue / Vuetify - Élément personnalisé inconnu: <v-app> - avez-vous enregistré le composant correctement?

Je suis nouveau sur Vue et Vuetify. Je viens de créer une application rapide pour vérifier les deux. Mais je commence à avoir des problèmes au début. Le vue échoue identifier les composants vuetify en dépit de toutes les étapes décrites dans le document.

vue.runtime.esm.js? ff9b: 587 [Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, veillez à fournir l'option "nom".

trouvé dans

---> à src\App.vue

Vous pouvez accéder à l'intégralité du code sur le bac à sable https://codesandbox.io/s/40rqnl8kw

javascriptvue.jsvuetify.js
10
indusBull

Vous rencontrez probablement un problème d'ordre dans vos opérations. Par exemple, vous définissez votre propre composant App qui utilise le composant v-app Avant même que vous ayez dit à Vue de l'utiliser, donc = Vue suppose que vous utilisez votre propre composant personnalisé v-app.

Placez Vue.use(Vuetify) avant de commencer toute instance Vue (via new Vue() qui nécessite des composants Vuetify, ou placez-la dans les définitions de composant elles-mêmes, tout en haut de la Balise <script> Après importation Vue et Vuetify dans le composant de fichier unique. Ne vous inquiétez pas si vous avez plus d'une déclaration Vue.use(Vuetify), car seul le premier fera n'importe quoi - tous les appels suivants ne feront tout simplement rien.

Voici un exemple de correction dans l'ordre des opérations: https://codesandbox.io/s/m9jpw517op

Par souci de fournir l'extrait de code ici en cas de rupture du lien dans le futur:

Original - Vue.use() est appelée avant new Vue(), ce qui entraîne une erreur.

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

Vue.use(Vuetify);

Fix - L'appel de new Vue() après Vue.use() permet Vue de résoudre le dépendance correctement.

Vue.use(Vuetify);

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

Edit: Cette réponse a été modifiée après avoir été acceptée afin de corriger une imprécision qui pourrait induire en erreur les lecteurs futurs, minimiser les modifications de l'échantillon de code pour des raisons de simplicité, et évitez que le correctif en question ne soit inaccessible si le site Web codesandbox devient indisponible.

13
B. Fleming

Un autre problème possible est que si vous avez activé la carte, vous devrez également spécifier tous les composants que vous souhaitez inclure:

Edit: on dirait que VuetifyLoader le fera automatiquement pour vous

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

Si vous venez de Google: pour moi, c’était briser les changements de v1 à v2, ce qui rendait la plupart des exemples de Codepen inutiles. J'ai dû changer cela pour faire fonctionner une application très simple Vuetify avec des tiroirs de navigation:

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

Peut-être que cela aide quelqu'un.

0
dirkk0