Runtime configuration change?

[m-thorsen]

Description

Sorry if this information is available, but I could not find an answer in the docs or by searching.

I was hoping to be able to let users select a theme that also included changing component defaults.
Using Vue/Vite (not Nuxt), is it possible to modify the full global configuration (ui object) at runtime (instead of having to pass props to or wrap each component)?

I'm not 100% averse to a bit of monkey patching on my current project, but a supported solution would obviously be much much better.

If this is not currently possible, please consider this a suggestion, for example via an ui prop on the App component or a useNuxtUi composable.

[benjamincanac]

Would you have an example in mind? You want to do something like the theme switcher on the v3 docs? 🤔

[m-thorsen]

Would you have an example in mind? You want to do something like the theme switcher on the v3 docs?

No, I was thinking about replacing multiple component defaults at once via the "ui object" documented here:
https://ui3.nuxt.dev/getting-started/theme#config
This includes default font weight/case for buttons, size for inputs etc... Basically, anything that can be set under "ui" in vite config.

There's a reference to useAppConfig() here: https://github.com/nuxt/ui/blob/v3/src/runtime/vue/stubs.ts
I will do some testing to see if it contains what I'm after, but at this moment I'm not sure if that's able or meant to be exposed/changed at runtime. I could not find any documentation for this.

[snackVal]

When using updateAppConfig({ ui: { ... } }), the updates are not applied to the NuxtUI components. Only the ui: { ... } options defined in defineAppConfig() are applied as intended.
It would be nice to be able to update the ui options at runtime, since it it defined in app.config that usually allows to update app config at runtime.
What do you think about it ? @benjamincanac

[DavidSabine]

I like this thread and I have a similar use case. With one difference:

I'd like, rather than the user 'select' a theme, to switch themes based on hostname of the http request. Imagine each of the following urls is served from the same nuxt app, but they look different based on domain name:

• https://the-wall.pinkfloyd.com || https://thewall.com
• https://meddle.pinkfloyd.com || https://meddle.com
• https://dark-side-o-the-moon.pinkfloyd.com || https://dark.moon
• etc.