nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.16k stars 559 forks source link

Runtime component customization with updateAppConfig #2828

Open izoukhai opened 1 day ago

izoukhai commented 1 day ago

For what version of Nuxt UI are you asking this question?

v3.0.0-alpha.x

Description

I want to customize my app.config.ts file from an external source.

Consider the following:

// plugins/config.ts

export default defineNuxtPlugin({
  async setup(nuxtapp) {
    const config = await fetchConfig()
    // output: {ui: {primary: "violet", button: {slots: {base: "hidden"}}}}

    if (config?.app_config) {
      updateAppConfig(config.app_config);
    }
  },
});

The primary color is updated correctly, but the hidden class is not applied to buttons. Any ideas why?

benjamincanac commented 1 day ago

This is nice idea! However, the issue is components merge the default config with #build/app.config for performance reasons, this is one of the reason HMR is not working when changing the App Config and you have to reload the page.

izoukhai commented 1 day ago

Hey @benjamincanac thanks for the answer!

So I guess it's not possible, unless I manage to call updateAppConfig before Nuxt UI reads app.config.ts ?