Nuxt 3配置Vuetify 3后按钮样式异常求助

按照指南配置Nuxt 3 + Vuetify 3，跳过Sass变量自定义章节后，按钮样式异常：字体过小，缺少font-weight:600，无法达到预期的Vuetify默认按钮样式。已安装vuetify、sass、@mdi/font，现有配置如下：

现有配置 #

plugins/vuetify.ts

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: true,
        components,
        directives,
    })

    nuxtApp.vueApp.use(vuetify)
})

nuxt.config.ts

export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify']
    }
});

app.vue测试代码

<script setup lang="ts">
import { VApp, VAppBar, VMain, VBtn } from "vuetify/components";
</script>

<template>
    <v-app>
        <v-app-bar title="App bar goes here"></v-app-bar>

        <v-main>
            <v-btn color="primary" prepend-icon="mdi-vuetify">Main content goes here</v-btn>

            <v-btn prepend-icon="mdi-check-circle" append-icon="mdi-account-circle">
                <template v-slot:prepend>
                    <v-icon color="success"></v-icon>
                </template>

                Button

                <template v-slot:append>
                    <v-icon color="warning"></v-icon>
                </template>
            </v-btn>
        </v-main>
    </v-app>
</template>

问题原因 #

1. 缺少主题配置：Vuetify 3 需要显式启用主题才能加载完整的组件样式（包括按钮的字体权重、大小等），原配置未添加theme选项，导致部分默认样式未生效。
2. 样式文件路径问题：原CSS导入使用vuetify/lib/styles/main.sass，这是Vuetify 2的样式入口，Vuetify 3推荐使用vuetify/styles作为统一的样式入口，确保所有基础样式和主题样式被正确导入。

解决方案 #

1. 更新plugins/vuetify.ts，添加主题与图标配置

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
// 导入MDI图标集配置（确保图标样式正常）
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    ssr: true,
    components,
    directives,
    // 启用默认主题，加载完整样式
    theme: {
      defaultTheme: 'light',
    },
    // 配置图标集，避免图标样式异常
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdi,
      },
    },
  })

  nuxtApp.vueApp.use(vuetify)
})

2. 修改nuxt.config.ts中的CSS导入路径

export default defineNuxtConfig({
    // 使用Vuetify 3标准样式入口
    css: ['vuetify/styles', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify']
    }
});

3. 优化app.vue（可选）

由于已在vuetify.ts中全局注册了所有组件，app.vue中无需手动导入组件，可直接使用：

<script setup lang="ts">
// 移除手动导入的组件
</script>

<template>
    <v-app>
        <v-app-bar title="App bar goes here"></v-app-bar>

        <v-main>
            <v-btn color="primary" prepend-icon="mdi-vuetify">Main content goes here</v-btn>

            <v-btn prepend-icon="mdi-check-circle" append-icon="mdi-account-circle">
                <template v-slot:prepend>
                    <v-icon color="success">mdi-check-circle</v-icon>
                </template>

                Button

                <template v-slot:append>
                    <v-icon color="warning">mdi-account-circle</v-icon>
                </template>
            </v-btn>
        </v-main>
    </v-app>
</template>

注：修复了图标插槽的问题，原代码中<v-icon>未指定图标名称，导致图标无法显示。

验证 #

修改完成后重启Nuxt开发服务，按钮将自动应用font-weight:600和默认字体大小，与Vuetify官方默认样式一致。

内容的提问来源于stack exchange，提问作者baitendbidz