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/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)
})
And my nuxt.config.ts looks like:
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',
}
},
})
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
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>