我在nuxt3
中使用vuetify3
,一些代码可以工作,但当尝试使用<v-stepper>...</v-stepper>
组件时,我得到以下错误:
✔ Nitro built in 533 ms
nitro 17:34:04
[Vue warn]: Failed to resolve component: v-stepper
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
我想知道为什么。这是我在official doc中使用的代码:
<template>
<v-container>
<h1>Login</h1>
<v-stepper v-model="e1">
<v-stepper-header>
<v-stepper-step
:complete="e1 > 1"
step="1"
>
Name of step 1
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step
:complete="e1 > 2"
step="2"
>
Name of step 2
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">
Name of step 3
</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-card
class="mb-12"
color="grey lighten-1"
height="200px"
></v-card>
<v-btn
color="primary"
@click="e1 = 2"
>
Continue
</v-btn>
<v-btn text>
Cancel
</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
<v-card
class="mb-12"
color="grey lighten-1"
height="200px"
></v-card>
<v-btn
color="primary"
@click="e1 = 3"
>
Continue
</v-btn>
<v-btn text>
Cancel
</v-btn>
</v-stepper-content>
<v-stepper-content step="3">
<v-card
class="mb-12"
color="grey lighten-1"
height="200px"
></v-card>
<v-btn
color="primary"
@click="e1 = 1"
>
Continue
</v-btn>
<v-btn text>
Cancel
</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-container>
</template>
<script>
export default {
data () {
return {
e1: 1,
}
},
}
</script>
我的nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass'],
build: {
transpile: ['vuetify'],
},
vite: {
define: {
'process.env.DEBUG': false,
},
},
})
我的plugins/vuetify.js
// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
export default defineNuxtPlugin(nuxtApp => {
const vuetify = createVuetify({
components,
directives,
})
nuxtApp.vueApp.use(vuetify)
})
我的package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev --port=8001",
"generate": "nuxt generate",
"preview": "cross-env PORT=8001 node .output/server/index.mjs"
},
"devDependencies": {
"nuxt": "3.0.0-rc.4"
},
"dependencies": {
"sass": "^1.53.0",
"vuetify": "^3.0.0-beta.5"
}
}
3条答案
按热度按时间kmpatx3s1#
Vue 3中不支持步进组件。如果您查看vuetify beta 3.0版本的文档,您可以看到支持的组件列表。
bz4sfanl2#
我有一些Vuetify3标签同样的问题。这是因为“Beta版本”我的意思。下一个版本(Titan)应该很快发布,这是写在官方Vuetify网站上。做得好我退出了。
j2qf4p5b3#
步进器组件尚未包含在最新版本的Vuetify中。他们计划在不久的将来(2023年第三季度)重新引入该组件。您可以在the official Vuetify roadmap页面查看。