Override default props from AppConfig

[hywax]

For what version of Nuxt UI are you suggesting this?

v3.0.0-alpha.x

Description

Hello everyone, I’d like to discuss the possibility of setting props by default from AppConfig. Currently, it’s very convenient that we can configure the theme through the config. It would be great to have a similar option for props. Previously, @benjamincanac mentioned here that this is not currently planned.

My proposal is simple: wrap all withDefaults in our own implementation. This way, we can define props without making significant changes to the code.

What it could look like

Let’s look at the Accordion.vue component. At the moment, its props look like this:

const props = withDefaults(defineProps<AccordionProps<T>>(), {
  type: 'single',
  collapsible: true,
  labelKey: 'label'
})

Let’s assume our wrapper is called withUiDefaults. Then the code would look like this:

-const props = withDefaults(defineProps<AccordionProps<T>>(), {
+const props = withUiDefaults(defineProps<AccordionProps<T>>(), {
  type: 'single',
  collapsible: true,
  labelKey: 'label'
})

The implementation of withUiDefaults is quite simple:

function withUiDefaults(props, defaults) {
  const defaultFromConfig = {}

  return withDefaults(props, {
    ...defaults,
    ...defaultFromConfig
  })
}

Issues I See

1. Typing AppConfig might be challenging
   We would need to somehow generate types based on the components.
   My opinion: I think we can retrieve this using vue-component-meta during the UI build stage. So, in my opinion, this isn’t a significant problem.

2. Developers might set modelValue or other critical props by default
   My opinion: In such cases, we can log a warning to the console. Additionally, developers should understand which props they are overriding. We won’t be able to cover all edge cases, but I don’t think we need to.

Additional context

No response

[benjamincanac]

I have no idea how to implement this honestly as withDefaults is a compiler macro, you can't access runtime code inside.

[hywax]

I completely forgot that withDefaults is a macro 😄. Yeah, can't just do that.

Here's how other UI do it:
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/defaults.ts
https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/services/config-transport/createProps.ts

[benjamincanac]

We could merge with defu the props but the main issue is where to store those defaults? Because the app.config is for the theme: https://github.com/nuxt/ui/blob/v3/src/runtime/components/Button.vue#L14

[sandros94]

We could merge with defu the props but the main issue is where to store those defaults? Because the app.config is for the theme: https://github.com/nuxt/ui/blob/v3/src/runtime/components/Button.vue#L14

and we need this to be compatible with both Nuxt and Vue!

This easily starts to be on a whole different level of complexity 🤔

[hywax]

@sandros94 for vue, I think you can specify @nuxt/ui/vite https://ui3.nuxt.dev/getting-started/installation/vue#ui

[hywax]

@benjamincanac can do is add a new object, like components.

export default defineAppConfig({
  ui: {
    icons: { /* ... */},
    colors: { /* ... */},
    theme: { /* ... */},
+   components: {
+     accordion: {
+      collapsible: false
+     }
    }
  }
})

[mostafaznv]

Thank you, @hywax, for your suggestion. I also need this feature as it helps prevent a lot of code duplication and unnecessary component wrapping throughout the project.

This feature has already been implemented in Vuetify, where they provide:

• Global default values (default values for all components)
• Contextual default values (default values specific to a component)
• Virtual components (creating new components based on existing ones)

These features make component management significantly more efficient.

FYI:
https://vuetifyjs.com/en/features/global-configuration/#contextual-defaults

I’m not sure, but they might have used the v-defaults-provider component under the hood.
https://vuetifyjs.com/en/components/defaults-providers