为什么< v-stepper/>组件在vuetify nuxt 3中不能正常工作

ippsafx7  于 2023-05-18  发布在  Vue.js
关注(0)|答案(3)|浏览(233)

我在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"
  }
}
kmpatx3s

kmpatx3s1#

Vue 3中不支持步进组件。如果您查看vuetify beta 3.0版本的文档,您可以看到支持的组件列表。

bz4sfanl

bz4sfanl2#

我有一些Vuetify3标签同样的问题。这是因为“Beta版本”我的意思。下一个版本(Titan)应该很快发布,这是写在官方Vuetify网站上。做得好我退出了。

j2qf4p5b

j2qf4p5b3#

步进器组件尚未包含在最新版本的Vuetify中。他们计划在不久的将来(2023年第三季度)重新引入该组件。您可以在the official Vuetify roadmap页面查看。

相关问题