nuxt / nuxt/ui

Is there are a way to handle custom "types" of theme variants?

Open
#6,411 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

v5
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Package

v4.x

Description

Hey there!
Thanks for a module, its really nice and useful.

But I have one problem.
For example - lets take a look on <UModal> component (or <UCard>).
Theme has just few variants: transition, fullscreen, overlay, scrollable. Thats all.
Imagine I need to add custom sizes for modals (or cards), lets say sm, md (defaul), lg.
For now, to achieve it - Im creating new custom wrapper component, like MyModal.vue, add my "size" prop, and pass all slots and props to child <UModal />.
So in this example - the only reason why <MyModal> exists - handle customization for sizes.

So my question is - is there are any way to add new "type of variants" for ui components?
I understand I can easily add new custom variants for existing one - lets say, I can add new "color" for UButton, or new variant "variant" (solid, soft etc). But if component have no variant "color" - I cant do anything with it at the moment.

And from that question I have a second one - how to handle my own "variants" the same way as I do for ui theme?
I have folder "theme" in app directory with configs for all components, and its imported and passed into app.config.
Can I handle my own props same way as variants, so my theming is centralized?
For example, when I add MyModal with prop "size" - can I handle it with theme config, and create new "my-modal" with variant "size"?

Or whats the best way to handle such behaviour?
Right now I dont really like the fact my theming is scattered across the project.
UI components - in theme config, custom components - in props or classes of the component itself.
And for modal in this example I need to look into both modal ui config and MyModal component classes. I wish to put it in one place.

Thanks in advance!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the UModal and UCard theme configurations, the custom MyModal.vue wrapper described in the issue, and the app.config integration. Clarify whether the request is for a supported custom variant mechanism or guidance for centralizing custom props; done requires a documented or implemented approach for centralized size styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.