vuetifyjs-nuxt:无法添加任何 UI 组件 [英] vuetifyjs-nuxt: can not add any UI component
问题描述
我正在使用 vuetifyjs/nuxt 入门模板.
I am using vuetifyjs/nuxt starter template.
它正确启动,但是当我尝试添加 <Bagde/>
UI 组件到 default.vue 在 <v-toolbar/>
组件中,我收到此错误:
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.
事实上,每当我想添加 UI 组件时都会发生这种情况(UI 组件 API一>).我在这里错过了什么?
In fact, this happens whenever I want to add a UI component (UI component API). What am I missing here?
来自 default.vue 文件:
我想补充:
<v-badge left>
<span slot="badge">6</span>
<v-icon
large
color="grey lighten-1"
>
shopping_cart
</v-icon>
</v-badge>
在
里面:
<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>
推荐答案
你好像选择了 a-la-carte setup 在项目创建期间.这意味着只导入使用的组件.所以如果你想使用其他组件而不是你需要去 plugins/vuetify.js 并在那里添加它.或者如果你完全删除然后只留下
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)
并且还从 nuxt.config 中删除转换导入.比所有组件都可用.但它也会像预期的那样增加包的大小
And also remove transform-imports from nuxt.config. Than all components will be available. But it will also increase bundle size as expected
这篇关于vuetifyjs-nuxt:无法添加任何 UI 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!