Javascript Vue/Vuetify - 未知的自定义元素：<v-app> - 您是否正确注册了组件？

Vue/Vuetify - Unknown custom element: <v-app> - did you register the component correctly?

提问by indusBull

I am new to Vue and Vuetify. I just created quick app to check both of them. But I am a running into issues in beginning. The vue fails to identify vuetify components despite following all the steps outlined in document. The error is like below -

我是 Vue 和 Vuetify 的新手。我刚刚创建了快速应用程序来检查它们。但我一开始就遇到了问题。尽管遵循了文档中列出的所有步骤，但 vue 仍无法识别 vuetify 组件。错误如下 -

vue.runtime.esm.js?ff9b:587 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src\App.vue

vue.runtime.esm.js?ff9b:587 [Vue 警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

在发现

---> 在 src\App.vue

You can access the entire code at sandbox https://codesandbox.io/s/40rqnl8kw

您可以在沙箱https://codesandbox.io/s/40rqnl8kw访问整个代码

回答by B. Fleming

You're likely experiencing a problem with the order of your operations. For instance, you're defining your own Appcomponent that uses the v-appcomponent before you've even told Vue to make use of it, so Vue assumes you're using your own custom v-appcomponent.

您可能遇到操作顺序问题。例如，您正在定义自己的App组件，该v-app组件甚至在您告诉 Vue 使用它之前就使用了该组件，因此 Vue 假定您正在使用您自己的自定义v-app组件。

Place Vue.use(Vuetify)before starting any Vue instances (via new Vue()that require Vuetify components, or place it within the component definitions themselves right at the top of the <script>tag after importing Vue and Vuetify within the single file component. Don't worry if you have more than one Vue.use(Vuetify)statement because only the first one will do anything--all subsequent calls will simply do nothing.

Vue.use(Vuetify)在启动任何 Vue 实例之前放置（通过new Vue()需要 Vuetify 组件，或者<script>在单个文件组件中导入 Vue 和 Vuetify 后将其放置在组件定义本身的标签顶部。如果您有多个Vue.use(Vuetify)语句，请不要担心因为只有第一个会做任何事情——所有后续的调用都不会做任何事情。

Here's an example of a fix in operation order: https://codesandbox.io/s/m9jpw517op

以下是操作顺序修复的示例：https: //codesandbox.io/s/m9jpw517op

---

---

For the sake of providing the code snippet here in case of the link breaking in the future:

为了在将来链接断开的情况下在此处提供代码片段：

Original- Vue.use()is called before new Vue(), resulting in an error.

原始-Vue.use()之前调用new Vue()，导致错误。

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

Vue.use(Vuetify);

Fix- Calling new Vue()after Vue.use()allows Vue to resolve the dependency correctly.

修复- 调用new Vue()afterVue.use()允许 Vue 正确解析依赖项。

Vue.use(Vuetify);

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

---

---

Edit:This answer has been amended after being accepted in order to fix an inaccuracy that could mislead future readers, minimize changes in the code sample for simplicity's sake, and avoid having the fix in question become inaccessible if the codesandbox website becomes unavailable.

编辑：此答案在被接受后进行了修改，以修复可能误导未来读者的不准确之处，为简单起见，尽量减少代码示例中的更改，并避免在代码和框网站不可用时无法访问相关修复。

回答by JohnC

There is another reason for this error that I recently ran into.

我最近遇到的这个错误还有另一个原因。

I recently upgraded from Vuetify 1.5 to 2.x and even though I had the order of operations correct as in the currently accepted answer here I was still receiving the error about v-app being unknown:

我最近从 Vuetify 1.5 升级到 2.x，即使我的操作顺序与当前接受的答案一样正确，但我仍然收到关于 v-app 未知的错误：

Unknown custom element: <v-app>- did you register the component correctly? For recursive components, make sure to provide the "name" option.

未知的自定义元素：<v-app>- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

Turns out that the upgrade process requires the following addition to package.json devDependencies section which didn't originally exist in my vuetify 1.5x package:

事实证明，升级过程需要在 package.json devDependencies 部分添加以下内容，而我的 vuetify 1.5x 软件包中原本不存在该部分：

"vuetify-loader": "^1.3.0"

(1.3.0 current version as of this writing)

（撰写本文时为 1.3.0 当前版本）

Once I added that the error went away.

一旦我补充说错误就消失了。

回答by dirkk0

If you are coming from Google: for me it was breaking changes from v1 to v2, that made most Codepen examples useless. I had to change this to get a very simple Vuetify app with navigation drawers to run again:

如果你来自谷歌：对我来说，它破坏了从 v1 到 v2 的变化，这使得大多数 Codepen 示例无用。我不得不改变这一点，以获得一个非常简单的 Vuetify 应用程序，并再次运行带有导航抽屉的应用程序：

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

replace all flat with text

Maybe this helps someone.

也许这对某人有帮助。

(edited to include cong yu's remark)

（编辑包括从宇的评论）

回答by Zaptree

Another possible problem is if you have a la carte enabled you will need to also specify all the components that you want included:

另一个可能的问题是，如果您启用了点菜功能，您还需要指定要包含的所有组件：

Edit: looks like VuetifyLoader will automatcially do that for you

编辑：看起来 VuetifyLoader 会自动为你做

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

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
  }
})

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
  }
})