I am trying to get Vuetify 3 to work with Nuxt 3.

I have a plugin for Vuetify:

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

// Import everything
// import * as ponents from 'vuetify/ponents'

export default defineNuxtPlugin((nuxtApp) => {
    const vuetify = createVuetify({
        ponents: {
            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)
})

And my nuxt.config.ts looks like:

import { defineNuxtConfig } from 'nuxt3'

// .config
export default defineNuxtConfig({
    css: [
        'vuetify/lib/styles/main.sass',
        '@/assets/scss/main.scss',
    ],
    build: {
        transpile: ['vuetify']
    },
    vite: {
        define: {
            'process.env.DEBUG': 'false',
        }
    },
})

The css portion of the nuxt.config.ts imports the styles from vuetify, however icons are not working as expected. I have tried to use VIcon along with VAppBarNavIcon, both of which don't show the icon.

I have tried to manually download material-design-icons-iconfont from yarn and then add material-design-icons-iconfont/dist/material-design-icons.css to my css, but that did not work. Has anyone found a way to make this work? I want to use the regular mdi icons.

Thanks

I am trying to get Vuetify 3 to work with Nuxt 3.

I have a plugin for Vuetify:

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

// Import everything
// import * as ponents from 'vuetify/ponents'

export default defineNuxtPlugin((nuxtApp) => {
    const vuetify = createVuetify({
        ponents: {
            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)
})

And my nuxt.config.ts looks like:

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs/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',
        }
    },
})

The css portion of the nuxt.config.ts imports the styles from vuetify, however icons are not working as expected. I have tried to use VIcon along with VAppBarNavIcon, both of which don't show the icon.

I have tried to manually download material-design-icons-iconfont from yarn and then add material-design-icons-iconfont/dist/material-design-icons.css to my css, but that did not work. Has anyone found a way to make this work? I want to use the regular mdi icons.

Thanks

• javascript
• vue.js
• nuxt.js
• nuxt3.js

Share Improve this question Follow edited Apr 21, 2022 at 1:04 kissu 47k1616 gold badges9090 silver badges189189 bronze badges asked Apr 20, 2022 at 22:04 Jacob HydeJacob Hyde 1,01011 gold badge1313 silver badges2222 bronze badges 2

• Hi, what version of Vuetify are you currently using? As far as I know, Vuetify 2 only supports Vue 2 (and thus won't work with nuxt 3), and if you are using Vuetify 3 please note that it is unstable and might have bugs, especially with nuxt. Read Vutify 2 docs – Ido Commented Apr 20, 2022 at 23:14
• 1 Hi, I just updated the description. It is Vuetify 3. I am aware its unstable, but still would like to know if anybody has found any work arounds. – Jacob Hyde Commented Apr 21, 2022 at 0:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Install the Material Design icons

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

Add this to your plugins/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
    }
  }
})

And now since we only want to import the icons we are using use it like this:

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

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

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

vite gives you the ability to Auto Import ponents, so you do not have to specifically say which ponents you want to use, it recognizes what you are using and only imports that. Just install the vite-plugin-vuetify.

To your question: I had the same issue, I fixed it by also importing the CSS of the icon font in my vuetify plugin. here is my plugind/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)
})

I have also a more detailed description on doing this here: https://www.the-koi./projects/how-to-set-up-a-project-with-nuxt3-and-vuetify3-with-a-quick-overview/

*npm i @mdi/font* then in your nuxt.config.ts

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
// https://v3.nuxtjs/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
    build: {
        transpile: ['vuetify'],
    },
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    },
})

Your should be good to go