vuetifyjs-nuxt：无法添加任何 UI 组件

Question

我正在使用 vuetifyjs/nuxt 入门模板。

它可以正确启动，但是当我尝试在 <v-toolbar /> 组件中添加 <Bagde /> UI componenent to the default.vue 时，出现此错误：

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

事实上，每当我想添加一个 UI 组件 (UI component API) 时，就会发生这种情况。我在这里错过了什么？

编辑：

来自 default.vue 文件：

我要补充：

<v-badge left>
        <span slot="badge">6</span>
        <v-icon
          large
          color="grey lighten-1"
        >
          shopping_cart
        </v-icon>
      </v-badge>

里面 <v-toolbar> 下面：

<template>
    <!-- rest of code -->
    <v-toolbar fixed app :clipped-left="clipped">
      <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
      <v-btn
        icon
        @click.stop="miniVariant = !miniVariant"
      >
        <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
      </v-btn>

       <!-- Added here -->

        <v-badge left>
    <span slot="badge">6</span>
    <v-icon
      large
      color="grey lighten-1"
    >
      shopping_cart
    </v-icon>
  </v-badge>
      <!-- end of the badge I added -->
      <v-btn
        icon
        @click.stop="clipped = !clipped"
      >
        <v-icon>web</v-icon>
      </v-btn>
      <v-btn
        icon
        @click.stop="fixed = !fixed"
      >
        <v-icon>remove</v-icon>
      </v-btn>
      <v-toolbar-title v-text="title"></v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        icon
        @click.stop="rightDrawer = !rightDrawer"
      >
        <v-icon>menu</v-icon>
      </v-btn>
    </v-toolbar>
    </v-app>
</template>

Answer 1

您似乎在创建项目时选择了 a-la-carte setup。这意味着只导入使用的组件。因此，如果您想使用其他组件，则需要转到 plugins/vuetify.js 并将其添加到那里。或者，如果您完全删除 then 并仅保留

Vue.use(Vuetify)

并从 nuxt.config 中删除转换导入。然后所有组件都将可用。但它也会像预期的那样增加包大小

vuetifyjs-nuxt：无法添加任何 UI 组件

vuetifyjs-nuxt: can not add any UI component

javascript

nuxt.js

vuetify.js