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

Question

我在

vuetify3

中使用

nuxt3

，一些代码可以工作，但是当尝试使用

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

我想了解为什么。这是我从官方文档中使用的代码：

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

Answer 1

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

Answer 2

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

Answer 3

我对某些 Vuetify3 标签也有同样的问题。我的意思是，这是因为“测试版”。下一个版本（Titan）应该很快发布，并在 Vuetify 官方网站上发布。干得好，我退出了..

Answer 4

只要 vuetify 3.4 版本尚未发布，您就可以从 vuetify 3.3.11 开始通过手动导入来使用 v-stepper（作为“实验室”组件的一部分）：

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