Nuxt•12mo ago

Set global size for all component using app.config.ts

How to set global size for all component using app.config.ts> I tried the followinf it does nto work:

export default defineAppConfig({
  ui: {
    // base colors
    primary: "green",
    gray: "slate",
    defaults: {
      size: "lg",
    }
  }
})

export default defineAppConfig({
  ui: {
    // base colors
    primary: "green",
    gray: "slate",
    defaults: {
      size: "lg",
    }
  }
})

export default defineAppConfig({
  ui: {
    // base colors
    primary: "green",
    gray: "slate",
    defaults: {
      size: "lg",
    }
  }
})

export default defineAppConfig({
  ui: {
    // base colors
    primary: "green",
    gray: "slate",
    defaults: {
      size: "lg",
    }
  }
})

kapa.ai•1/21/25, 5:22 AM

Hi @mubaidr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•1/21/25, 5:22 AM

----------------------
To set a global size for all components using

app.config.ts

app.config.ts

in Nuxt UI, you need to modify your configuration slightly. The approach you've tried is close, but not quite correct. Here's how you can set a global default size for components:

export default defineAppConfig({
  ui: {
    primary: "green",
    gray: "slate",
    button: {
      default: {
        size: "lg"
      }
    },
    // Repeat for other components you want to set a default size for
  }
})

export default defineAppConfig({
  ui: {
    primary: "green",
    gray: "slate",
    button: {
      default: {
        size: "lg"
      }
    },
    // Repeat for other components you want to set a default size for
  }
})

This configuration sets the default size for buttons to "lg". However, it's important to note that you need to do this for each component type individually, as there isn't a single global setting for all components.

The reason for this is that different components may have different size options or implementations. As stated in the Nuxt UI Theming documentation:

"Some component props like

size

size

color

color

, variantvariant, etc. have a default value that you can override in your

app.config.ts

app.config.ts

."

If you want to set a default size for multiple components, you would need to repeat this structure for each component type. For example:

export default defineAppConfig({
  ui: {
    primary: "green",
    gray: "slate",
    button: {
      default: {
        size: "lg"
      }
    },
    input: {
      default: {
        size: "lg"
      }
    },
    select: {
      default: {
        size: "lg"
      }
    }
    // ... other components
  }
})

export default defineAppConfig({
  ui: {
    primary: "green",
    gray: "slate",
    button: {
      default: {
        size: "lg"
      }
    },
    input: {
      default: {
        size: "lg"
      }
    },
    select: {
      default: {
        size: "lg"
      }
    }
    // ... other components
  }
})

Remember that this sets the default size, which can still be overridden on individual component instances if needed.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•1/21/25, 5:22 AM

@255041865672294410 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Set global size for all component using app.config.ts

Similar Threads

Similar Threads

Similar Threads