N
Nuxt•2mo ago
mubaidr

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",
    }
  }
})
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @mubaidr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set a global size for all components using 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, color, variant, etc. have a default value that you can override in your 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
kapa.ai•2mo ago
<@255041865672294410> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?