How to override components style globally when using within another Nuxt Module? #3679
Description
Description
Hi,
I'm struggling to customize my components when using Nuxt UI within another Nuxt Module, I've search but cannot get it to work, tried with using app.config.ts like below and also within module.ts but no joy, would appreciate if someone could help out.
export default defineAppConfig({
ui: {
button: {
slots: {
base: 'rounded-full font-semibold cursor-pointer'
},
},
}
})
My module.ts file:
import { defineNuxtModule, installModule, createResolver } from '@nuxt/kit'
export default defineNuxtModule<ModuleOptions>({
meta: {
name: 'my-module',
configKey: 'myModule',
},
hooks: {
'nitro:config': (nitroConfig) => {
const { resolve } = createResolver(import.meta.url)
nitroConfig.publicAssets ||= []
nitroConfig.publicAssets.push({
dir: resolve('./runtime/images/'),
maxAge: 60 * 60 * 24 * 365,
})
},
},
defaults: {},
async setup(_options, _nuxt) {
const { resolve } = createResolver(import.meta.url)
await installModule('@nuxt/ui')
await installModule('nuxt-svgo', {
autoImportPath: resolve('./runtime/icons'),
defaultImport: 'component',
componentPrefix: 'i',
})
_nuxt.options.css.push(resolve('./runtime/style.css'))
},
})