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 21 hours 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 ?