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 🙏🏻 |
|
Can we maybe have this fixed with v3? :) |
Sorry to bother you, @benjamincanac I’ve been keeping an eye on a few Vue frameworks to decide on my next go-to framework, and I’m curious about this feature. For now, it seems like only Vuetify supports it. |
|
@mostafaznv It is not planned at the moment no, it would require a tremendous amount of work to make all props configurable globally and would not be very clean since we now use type-based declaration for props. However, all props regarding the theme are configure globally already like |
I've been thinking about this. I actually need this functionality because some components have default props that need to be overridden. And I don't like doing it every time. I'll think about the best way to do this without a headache. It's clear that it won't be quick, but I would like to have this functionality. |
|
I just noticed that Nuxt UI is lacking a spinner. Maybe the content could be an icon set by prop or custom content set by a slot. |
Do you mean something outside of being able to add a |
|
Yes some components have this abbility but there is no standalone component |
|
Hey! Loving v3 so far. Any timeline for when Pro v2 docs will be out? |
|
They will be coming soon! Here is my roadmap for the coming months while maintaining both Nuxt UI v2/v3 and Nuxt UI Pro v1/v3:
|
Relatively speaking, I am looking forward to it more https://ui3.nuxt.dev/pro |
|
Any progress on using it without nuxtjs? Will purchase pro if it works |
Nuxt UI can now use it on Vue. For details, please check https://ui3.nuxt.dev/getting-started/installation/vue |
Awesome, the pro version also works with Vuejs? |
|
@twf-nikhila @ikxin |
|
Nuxt UI Pro v3 doesn't work with Vue yet, I have to work on this. |
@benjamincanac any timeline for when it'll be released? |
Thats a long list! Personally I would appreciate if Nuxt UI is first priority and Nuxt UI Pro comes after everything is finished. This would also assure that v3 is tested well enough before you release Pro v3. |
Nuxt UI definitely has the priority! Since UI Pro is built on top of it, everything needs to work on UI before being merged and used by UI Pro itself. But do keep in mind that both projects depend on two separate upstreams (tailwind v4 and reka ui) that are currently in |
|
Tailwind v4 has been in alpha for a long time 😂 |
Well the first beta version has been released today 😂 |
|
how to use asChild on |
|
in the latest alpha 9 version i am getting the following error: |
|
I'm posting this comment here to ask you for help. With the growing number of issues, I have to choose to spend all my time answering issues to keep the number "reasonable" or actually code to move forward. So if any of you guys have a bit of spare time to help on issue triage or even if you encounter old issues that aren't relevant anymore and can be closed, please let me know! That would be greatly appreciated 😊 Thank you! |
|
Sorry for disturbing, but I have two points:
|
|
@MickL while on v2 docs, last I checked, v3 is not linked, on v3 docs v2 is indeed linked. I am also unsure of how this is a problem given that an official release is yet to happen and therefore, in my opinion, only people following this issue, who are willing to test it early, need to even know about its existence for now. Regarding the toast, I would have to disagree. There is a very distinctive difference between a toast and a notification in the programming world (web development is only one of the areas). A toast, by programming definition, is a small, unobstructive pop-up, typically in the corner of a page, meant to notify of non-critical information, like success/error messages. A notification, on the other hand, is a more prominent overlay meant to convey important information, like the notifications you get on your phone from apps/websites. Therefore, the toast should stay as toast because its name is true to its purpose, and it has nothing to do with food. Nuxt UI indeed provides a way to use toasts as notifications with further customization and actions, but it is still a toast in essence. (And regarding your off topic statement, toast can also be made from whole grain bread, it doesn't have to be white) And lastly, regarding types, I believe there are already a few PR's meant to address some aspects of it |
Personally I would recommend everyone who starts a new project "now" to use v3. Tailwind is in beta and Nuxt UI also looks kinda ready soon. Also v3 is implementing breaking changes everywhere. Personally I would even write a big heads up on the mainpage of Nuxt UI that v3 is coming up.
I dont see any difference between a "toast" as you say and a phone notification. On macOS the "toasts" are also called notifications and they have the same size as a Nuxt UI toast. They come in on the top right, not the direction of a physical toast (Offtopic: The "whole grains" are as unhealthy as normal ones) |
If you'd like, we could continue this topic privately to not clutter the issue, but essentially, as I said (though this time with slightly more details) a toast is a small non-intrusive unobstructive pop-up for general, non-critical feedback that goes away after a while automatically, not requiring any interaction from the user and not blocking anything, for example error/success messages. A notification doesn't go away automatically and requires interaction (like to dismiss or to read), is more obstructive and provides more critical details (like the example I provided with the notifications you get on your phone in the notification bar, which don't go away until you swipe them aside, or if you want an example from a website then the notification menu on YouTube which requires you to either click on it, hide it, or turn off all notifications from the source of the notification) |
|
On iOS and macOS the notifications are small, come in for a few seconds and go away automatically (on macOS optionally they can stay until user reacts) and they are called notification and not toast. What you describe is the notification center where notifications stay because normally they are visible only for a few seconds exactly like the "toast" component in Nuxt UI. |
and others
The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.
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.
Documentation
https://ui3.nuxt.dev
Roadmap (Nov 20, 2024)
reka-ui@alphaon@nuxt/ui&@nuxt/ui-pro(feat(module)!: migrate toreka-ui#2448)@nuxt/ui-procomponents@nuxt/ui-procomponents (almost all are done except for Dashboard)@nuxt/uilikeCalendar(feat(Calendar): implement component #2618),DateInput,Tree(feat(Tree): implement component #2757),Stepper(feat(Stepper): new component #2733), etc.@nuxt/ui&@nuxt/ui-proofficially oncetailwindcssandreka-uiare released@nuxt/ui-procomponents & templates like Changelog, Portfolio, etc.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: