带有 Vuetify 图标的 Nuxt 3答案

【问题标题】：Nuxt 3 with Vuetify Icons带有 Vuetify 图标的 Nuxt 3
【发布时间】：2022-08-20 16:26:43
【问题描述】：

我正在尝试让 Vuetify 3 与 Nuxt 3 一起使用。

我有一个 Vuetify 插件：

// plugins/vuetify.ts
import { defineNuxtPlugin } from \'#app\'
import { createVuetify } from \'vuetify\'
import {
    VApp,
    VAppBar,
    VAppBarNavIcon,
    VAppBarTitle,
    VBtn,
    VIcon
} from \'vuetify/components\'

// Import everything
// import * as components from \'vuetify/components\'

export default defineNuxtPlugin((nuxtApp) => {
    const vuetify = createVuetify({
        components: {
            VApp,
            VAppBar,
            VAppBarNavIcon,
            VAppBarTitle,
            VBtn,
            VIcon
        },
        theme: {
            defaultTheme: \'myCustomTheme\',
            themes: {
                myCustomTheme: {
                    dark: false,
                    variables: {}, // ✅ this property is required to avoid Vuetify crash

                    colors: {
                        // Workaround: Custom colors seem to erase default colors, so we need to include the default colors (of `light` or `dark` theme)
                        background: \'#fff\',
                        surface: \'#fff\',
                        primary: \'#38b6ff\',
                        \'primary-darken-1\': \'#3700B3\',
                        secondary: \'#03DAC5\',
                        \'secondary-darken-1\': \'#03DAC5\',
                        error: \'#CF6679\',
                        info: \'#2196F3\',
                        success: \'#4CAF50\',
                        warning: \'#FB8C00\',
                    },
                }
            }
        }
    })
    nuxtApp.vueApp.use(vuetify)
})

我的 nuxt.config.ts 看起来像：

import { defineNuxtConfig } from \'nuxt3\'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    css: [
        \'vuetify/lib/styles/main.sass\',
        \'@/assets/scss/main.scss\',
    ],
    build: {
        transpile: [\'vuetify\']
    },
    vite: {
        define: {
            \'process.env.DEBUG\': \'false\',
        }
    },
})

nuxt.config.ts 的 css 部分从 vuetify 导入样式，但是图标没有按预期工作。我曾尝试将 VIcon 与 VAppBarNavIcon 一起使用，两者都不显示图标。

我曾尝试从 yarn 手动下载 material-design-icons-iconfont，然后将 material-design-icons-iconfont/dist/material-design-icons.css 添加到我的 css 中，但这不起作用。有没有人找到一种方法来完成这项工作？我想使用常规的 mdi 图标。

谢谢

您好，您目前使用的是哪个版本的 Vuetify？据我所知，Vuetify 2 仅支持 Vue 2（因此不适用于 nuxt 3），如果您使用的是 Vuetify 3，请注意它不稳定并且可能存在错误，尤其是使用 nuxt。 Read Vutify 2 docs
你好，我刚刚更新了描述。它是 Vuetify 3。我知道它不稳定，但仍然想知道是否有人找到任何解决方法。

标签： javascript vue.js nuxt.js nuxtjs3

【解决方案1】：

安装 Material Design 图标

$ yarn add @mdi/js -D
// OR
$ npm install @mdi/js -D

将此添加到您的插件/vuetify.ts：

import { createVuetify } from 'vuetify/lib'
import { aliases, mdi } from 'vuetify/lib/iconsets/mdi-svg'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi
    }
  }
})

现在因为我们只想导入我们正在使用的图标，所以像这样使用它：

<template>
  <v-icon :icon="mdiAccount" />
</template>

<script>
  import { mdiAccount } from '@mdi/js'

  export default {
    data: () => ({
      mdiAccount
    })
  }
</script>

【讨论】：

【解决方案2】：

vite 使您能够自动导入组件，因此您不必具体说明要使用哪些组件，它会识别您正在使用的内容并仅导入它。只需安装 vite-plugin-vuetify。

对于你的问题：我有同样的问题，我通过在我的 vuetify 插件中导入图标字体的 CSS 来修复它。这是我的插件/vuetify

import { createVuetify } from 'vuetify'

import { aliases, fa } from 'vuetify/iconsets/fa'
import {mdi} from "vuetify/lib/iconsets/mdi";
// make sure to also import the coresponding css
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import '@fortawesome/fontawesome-free/css/all.css' // Ensure your project is capable of handling css files
export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({ // Replaces new Vuetify(...)
        theme: {
            defaultTheme: 'dark'
        },
        icons: {
            defaultSet: 'fa',
            aliases,
            sets: {
                mdi,
                fa
            }
        },
    })

    nuxtApp.vueApp.use(vuetify)
})

我在这里也有更详细的描述：https://www.the-koi.com/projects/how-to-set-up-a-project-with-nuxt3-and-vuetify3-with-a-quick-overview/

【讨论】：