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 🙏

[oemer-aran]

Problem Statement

I wanted to migrate from my custom setup to this plugin, but I am having issues migrating the iconspart.

These are my current working Vuetify Options using @mdi/js and similar to official docs example (see last example in that section):

import { aliases, mdi } from "vuetify/iconsets/mdi-svg"
import {  mdiAutoFix, ... } from "@mdi/js"

 const mdiIcons= { 
  mdiAutoFix, 
  // ..
} 
 
const customIcons = {
  wMedia: "M2 9.07228H3.44362C..."
  // ..
}

//..
const options = {
 // ..
 icons: {
    defaultSet: "mdi" ,
    aliases: {
      ...aliases,
      ...customIcons,
      ...mdiIcons 

    },
    sets: {
      mdi,
    },
 }
}

If I use the official vuetify.vuetifyOptions API from the nuxt vuetify plugin, i get an error in development:

defineNuxtConfig({
  vuetify: {
    vuetifyOptions: {
       // all other options work, except "icons"
       icons: {
            defaultSet: "mdi-svg", // doesn't matter if i choose mdi-svg or mdi, same error
            sets: ["mdi"],
            svg: {
              mdi: {
                // produces TS errors, since the interfaces for `icons` is different than in the original vuetify config
                ...aliases,
                ...customIcons,
                ...mdiIcons
             },
          },
      },
  }
})

The above config, will lead to the following error when starting local nuxt server:

Only workaround that works for me

export default defineNuxtPlugin((nuxtApp) => {
  // using "vuetify:before-create" has the same issues as in `nuxt.config`. The icons interface is different.
  nuxtApp.hook("vuetify:configuration", ({ vuetifyOptions }) => {
    // other options can be defined in nuxt.config.ts, but I don't know if that has any downsides
    vuetifyOptions.icons = myVuetifyOptions.icons
  })
})

[AndreyYolkin]

Thanks for reaching out! This is a usage question rather than a bug report. The issue tracker is now reserved for confirmed bugs and feature requests.

For usage questions and help, please use the Vuetify Discord or check the documentation. 🙏

Closing as part of issue tracker triage.