vuetifyjs-nuxt: can not add any UI component [dupl

问题:

This question already has an answer here:

• <v-card> - did you register the component correctly? 1 answer

I am using vuetifyjs/nuxt starter template.

It launches correctly, however when I try to add a <Bagde /> UI componenent to the default.vue inside the <v-toolbar /> component, I am getting this error:

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

In fact, this happens whenever I want to add a UI component (UI component API). What am I missing here?

EDIT:

From default.vue file:

I want to add:

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

inside <v-toolbar> below:

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

回答1:

It seems like u choosed a-la-carte setup during project creation. It means that only components that are used are imported. So if you want to use other components than you need to go to plugins/vuetify.js and add it there. Or if you remove then altogether and leave only

Vue.use(Vuetify)

And also remove transform-imports from nuxt.config. Than all components will be available. But it will also increase bundle size as expected