v3 #1289
Comments
|
I would like to help, if I'm able to. Is there going to be a dedicated branch or will it be done in the |
|
Once we start this, there will be indeed a new branch with auto-release so we can try it out and especially keep working on the |
|
I have few design ideas if you are open to this I would like to share it for the future of Nuxt UI 3. Should we discuss this in this issue or it'll be better to discuss design ideas in seperate discussion thread? |
|
@jd-solanki You can share them here! |
|
Since it is supposed to be a refactoring to all components, could we give the possibility of compatibility with unocss? |
|
@sawa-ko It will be made with Tailwind v4. To what end would you make it compatible with Uno? |
|
I've started working on this in a private repository of mine, I'll open-source it once I'm satisfied with the base so you guys can check it out 😊. A lot has changed since I'll post regular updates on this issue. |
|
Please tell me how long it will take for this upgrade to be available. |
|
I have no idea how long it will take and it's not entirely up to us, I hope to release it at the same time as the official release of Tailwind v4. |
|
That's awesome. The new version of nuxt-ui uses exactly the tech stack I expected. I tried to build my own UI library using radix-ui and tailwind-variants, but I immediately found that even with radix-ui, it is not easy to build a full UI library. But I got an idea with an API that works with any design language. If you are interested, here is my demo repository: |
|
@robin-dongbin It's already in the making. There are already 13 components done, 36 more to go 😅 |
|
Since the component library is based on radix-ui without styles, I thought it would be nice to provide an api that is abstracted from various design systems, so you can switch styles from one system to another at any time. If people want to implement another design system, they can just customize it, share files, or even contribute to a repository. Taking things a step further, it is possible to switch between different design systems at runtime. Of course, I'm just offering an idea, and if you think it's too late, that's fine |
|
This is actually already what we're doing with the App Config. You can customize the classes for every part of every component. |
|
Thanks for the work! Just one question :
|
|
No we keep the For example the export default {
base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
padding: 'px-1',
size: {
xs: 'h-4 min-w-[16px] text-[10px]',
sm: 'h-5 min-w-[20px] text-[11px]',
md: 'h-6 min-w-[24px] text-[12px]'
},
rounded: 'rounded',
font: 'font-medium font-sans',
background: 'bg-gray-100 dark:bg-gray-800',
ring: 'ring-1 ring-gray-300 dark:ring-gray-700 ring-inset',
default: {
size: 'sm'
}
}Here is the new version: export default {
base: 'inline-flex items-center justify-center text-gray-900 dark:text-white px-1 rounded font-medium font-sans bg-gray-50 dark:bg-gray-800 ring ring-gray-300 dark:ring-gray-700 ring-inset',
variants: {
size: {
xs: 'h-4 min-w-[16px] text-[10px]',
sm: 'h-5 min-w-[20px] text-[11px]',
md: 'h-6 min-w-[24px] text-[12px]'
}
},
defaultVariants: {
size: 'sm'
}
}This is a breaking change if you've overridden its config in your |
|
Ok ! Effectively, it's a breaking change but it seam ok for the future to have a better granularity with the variants. Thanks for the explanation and the example 🙏🏻 |
|
I’d like to suggest adding the ability to configure all props dynamically, rather than being limited to defining only |
|
Apologies if it's been answered already, but what's the plan for Nuxt UI Pro? |
|
@rigtigeEmil it has been answered multiple times above, some of them being:
and:
|
Thank you for awesome work. However please add ToogleGroup component: https://www.radix-vue.com/components/toggle-group |
|
@benjamincanac |
|
Do you know why I have this error with " npx vue-tsc --noEmit" : On all my modules: |
|
Can we have an even darker theme? |
@benjamincanac This is a great idea to me for many reasons. There are issues with current v-calendar version. Avoiding to rely on external dependency for such an important component should help with code robustness, styling consistency, and component performance. |
|
question about the development process: nuxt ui pro depends on nuxt ui... if you are using nuxt ui v3... that means that they are radix based. while nuxt ui pro still looks to be on ^2. is the pro being worked on as well ? will they be released together ? |
|
@orenmizr Nuxt UI-Pro also has an alpha release, as explained above #1289 (comment) (please do note that not all components have been rewritten, yet)
|
@MrHBS you can go as dark as: <style>
@import "tailwindcss";
@import "@nuxt/ui"; /* or @nuxt/ui-pro */
.dark {
--ui-bg: var(--color-black);
}
/*
Or if you want it also for the light theme
:root {
--ui-bg: var(--color-black);
}
*/
</style> |
|
Hi all. Not sure if this has already been answered. Is Nuxt UI 3 going to be backwards compatible while we can upgrade to the new v3 components? |
No. |
|
it makes sense. the move from headless to radix is a good move. i hope that project will continue to create powerful and accessible primitives. ui 3 should be a lot better as a whole. incredible work 🙏 |
|
Btw guys Radix Vue v2 is coming and they are planning a rebranding. It will be called Reka UI. I think Nuxt UI v3 should wait for this update too? Alpha version has already been released: https://reka-ui.com Changelog: https://github.com/unovue/radix-vue/releases/tag/v1.0.0-alpha.1 |
why change something that is working ? part of radix-vue's success was because its direct relation to radix. not sure about this departure. in my language reka means background so "Background UI" : ) |
Well, here's the quote straight from the announcement.
|
|
I think the decision is good but I dont like the name Reka UI aswell |
Well, we all gonna install |
|
I have an issue, i want to add select inside dropdown, say for example: |
@sharmapukar217 you can take a look at the playground to have an example ui/playground/app/pages/components/dropdown-menu.vue Lines 15 to 21 in 7687ac1 For example inside your Dropdown you create a theme/language that have a number of children and you can map their |
thank you for your suggestion but i'm afraid to say it doesn't work. First of all, this seems not working with nested dropdown, and there's no option for dropdown radio element for now. <UDropdownMenu>
<UDropdownContent>
<UDropdownItem>Something</UDropdownItem>
<UDropdownSub>
<UDropdownSubTrigger>Nested</UDropdownSubTrigger>
<UDropdownSubContent>
...
</UDropdownSubContent>
</UDropdownSub>
</UDropdownContent>
</UDropdownMenu> |
|
I know this topic has slightly been discussed in the past, but I believe v3 users could also benefit from a built-in theme changer component (like the one used in docs). Although the code for it is present, it would still likely be better implemented officially than most of the recreation attempts. It could make it much more productive and convenient |
|
@GalacticHypernova The issue I see with this is it's not only a component, a plugin is required to make this work: https://github.com/nuxt/ui/blob/dev/docs/plugins/ui.ts |
Is there any downside to having this plugin? Why is it an issue? |
|
Amazing work, I'm looking forward to this! 🤩 I've just tried v3.0.0-alpha.8 in a Inertia.js/Vue project and noticed one thing. It seems to be coupled to Inertia.js routing explanation
Is this worth an issue? Thanks |
|
@Larsklopstra There is already this issue that relates: #2518. I'm not sure this can be done because we need to use the |
Maybe you can try overwrite the |
and others
The development is ongoing on the
v3branch of this repository: https://github.com/nuxt/ui/tree/v3.A lot has changed since
@nuxt/uiwas made open-source (May 2023), so the plan here is to rewrite every component from scratch alongside their config.I'll post regular updates on this issue and on https://twitter.com/benjamincanac.
Overview
radix-vue#409 which should solve allv3.0issuesuseUIfor https://www.tailwind-variants.org/Documentation
https://ui3.nuxt.dev
Breaking Changes
The biggest change is the switch to
tailwind-variants, this will cause lots of breaking changes if you've used theuiprop orapp.config.tsto override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.The config will now have a
slotsamongst other keys that will specifically target dom nodes. Theuiprop will only allow you to target those slots.These changes alongside the refactor of all components will also improve the types, the
app.config.tsanduiprops are now perfectly typed, as well as all componentsprops,slots,emitsandexpose.Components
The text was updated successfully, but these errors were encountered: