为什么＆lt; v-stepper/＆gt;组件在vuetify nuxt 3中无法正常工作

Question

我在vuetify3 in nuxt3中，有些代码可以使用，但是当尝试使用＆lt; v-Stepper＆gt; ...＆lt;/v-stepper＆gt ;组件我会收到以下错误：

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

我想了解原因。这是我从

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

。 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,
      },
    },
})

我的插件/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"
  }
}

Answer 1

VUE 3中不支持步进组件。如果您检查版本Beta 3.0的Vuetify文档，您可以看到支持的组件列表。

Answer 2

步进组件尚未包含在最新版本的Vuetify中。他们计划在不久的将来重新引入该组件（第三季度2023年）。您可以在
官方的vuetify路线图页面。

Answer 3

只要Vuetify 3.4发行尚待发布，您就可以使用Vuetifie 3.3.11开始使用V-Stepper（作为“实验室”组件的一部分），通过手动导入它：

<script setup>
  import { VStepper } from 'vuetify/labs/VStepper'
</script>

Answer 4

我在一些Vuetify3标签上也有同样的问题。我的意思是因为“ beta版本”。下一个版本（Titan）应很快发布，这就是在Vuetify官方网站上写的。我已经退出了。