Define variants inside a component

[memic84]

Description

Is it possible to define the same configuration that is defined in app.config, inside a component.

Now it seems that you can only define the slots, or class when there are no slots.

[HugoRCD]

Yes, using the :ui props. I didn't really understand what you meant exactly 🤔

[benjamincanac]

No it's not possible, the ui prop only targets slots after variants have been calculated.

[memic84]

It would be great if that also could be done from the component.

We are creating our own abstractions in between nuxt ui and pass the props with v-bind=props

That means when we create components which are custom and not from nuxt ui l, the tailwind variants aren't under app config ui but in the component itself.

However i think it would be also more readable if the component variant was an option.

As a solution we now have like Button.vue and button.theme.ts which is imported in app config.

Any thoughts on this? @benjamincanac

[benjamincanac]

Unfortunately this is not how the library has been designed. The goal is to define all possible variants in the app.config.ts so they are available to all instances of components. When instantiated the component computes each slots class based on the props and let the user override the result of this using the ui and class props.

[memic84]

One last question about the variants. When defined inside app.config, is it possible to add new variants, or just completely override the existing one?

[benjamincanac]

You can't directly add new keys under variants as it requires a prop on the component but you can add new keys under each variants object if it makes sense. For example, you can add a new variant for the Button: https://github.com/nuxt/ui/blob/v3/src/theme/button.ts#L19

[memic84]

Yes. Maybe variants and variant make ot confusing, but for example adding '2xl' key to sizes works as i have seen.

I just wonder if it is possible to define variant, as primary and secondary and remove the solid, outline keys and all the others. The object merge probably kicks in here