how to add custom theme and icons in plugin

[nabeel-nexttier]

i have file of icons and custom theme which i want to include in plugin , how to do so ? i have following cod in plugin

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'
import defaults from './vuetify/defaults'
import { icons } from './vuetify/icons'
import theme from './vuetify/theme'
import '@core/scss/template/libs/vuetify/index.scss'
import 'vuetify/styles'

export default defineNuxtPlugin(({ vueApp }) => {

const vueitfy =  createVuetify({
    aliases: {
      IconBtn: VBtn,
    },
    defaults,
    icons,
    theme,
  })
  console.log('vuetify.ts is working' , vueitfy)
vueApp.use(vueitfy)
})

[userquin]

@nabeel-nexttier

You should move a few things to vuetifyOptions (Nuxt or Vuetify config file):

• replace aliases with aliases: { IconBtn: 'VBtn' }: don't import the VBtn, just add the string
• include theme and defaults using the imports in Nuxt or Vuetify config file

About icons, can you shared what's inside your './vuetify/icons' module/script?

Move import '@core/scss/template/libs/vuetify/index.scss' and import 'vuetify/styles' to Nuxt css entry:

css: ['@core/scss/template/libs/vuetify/index.scss', 'vuetify/styles'], // <== maybe requires changing the `@` prefix with `/`

EDIT: remove your plugin or don't register Vuetify plugin inside it

[nabeel-nexttier]

@userquin following code solved the issue , thanks btw :)

import { createVuetify } from 'vuetify'

import defaults from './vuetify/defaults'
import { icons } from './vuetify/icons'
import theme from './vuetify/theme'

export default defineNuxtPlugin(( nuxtApp ) => {

  nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
    vuetifyOptions.theme = theme
    vuetifyOptions.icons = icons
    vuetifyOptions.defaults = defaults
    })

const vueitfy = createVuetify()
  nuxtApp.vueApp.use(vueitfy)
})

[userquin]

You're registering the Vuetify plugin twice, replace your Nuxt plugin with this one:

import defaults from './vuetify/defaults'
import { icons } from './vuetify/icons'
import theme from './vuetify/theme'

export default defineNuxtPlugin(( nuxtApp ) => {
  nuxtApp.hook('vuetify:before-create', ({ vuetifyOptions }) => {
    vuetifyOptions.theme = theme
    vuetifyOptions.icons = icons
    vuetifyOptions.defaults = defaults
  })
})

You can also move this configuration to your Nuxt/Vuetify config file, removing also your Nuxt plugin, the Vuetify module will register the Vuetify plugin for you.

[userquin]

can you try adding empty defaults? vuetifyOptions.defaults = vuetifyOptions.defaults ?? {}, it seems a bug (vuetify, the module or both)

EDIT: file a new issue for this :pray: