v3 #1289

benjamincanac · 2024-01-29T15:53:29Z

The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.

A lot has changed since @nuxt/ui was 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)

Breaking Changes

The biggest change is the switch to tailwind-variants, this will cause lots of breaking changes if you've used the ui prop or app.config.ts to override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.

At the beginning the config was split in many keys for the same div to give more flexibility, but since then we introduced tailwind-merge which now allows us to group those keys together, this is a good opportunity to clean the whole thing.

The config will now have a slots amongst other keys that will specifically target dom nodes. The ui prop will only allow you to target those slots.

These changes alongside the refactor of all components will also improve the types, the app.config.ts and ui props are now perfectly typed, as well as all components props, slots, emits and expose.

Feel free to comment on this if you have any ideas for the next major.

The text was updated successfully, but these errors were encountered:

sandros94 · 2024-01-31T22:09:30Z

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 dev one?

benjamincanac · 2024-02-01T10:03:09Z

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 v2 as it might take some time. I'll create new issues once this gets started with the remaining things to do 😊

jd-solanki · 2024-02-09T04:59:47Z

Hi @benjamincanac

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?

benjamincanac · 2024-03-04T15:05:03Z

@jd-solanki You can share them here!

sawa-ko · 2024-03-05T20:56:39Z

Since it is supposed to be a refactoring to all components, could we give the possibility of compatibility with unocss?

benjamincanac · 2024-03-06T09:27:48Z

@sawa-ko It will be made with Tailwind v4. To what end would you make it compatible with Uno?

benjamincanac · 2024-03-06T15:07:26Z

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 @nuxt/ui was made open-source (May 2023), so the plan here is to rewrite every component from scratch alongside their config. For example, at the beginning the config was split in many keys for the same div to give more flexibility, but since then we introduced tailwind-merge which now allows us to group those keys together.

I'll post regular updates on this issue.

ghost · 2024-03-08T15:57:39Z

Please tell me how long it will take for this upgrade to be available.
Very much looking forward to this upgrade

benjamincanac · 2024-03-08T16:05:24Z

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.

robin-dongbin · 2024-03-13T06:48:51Z

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:
https://github.com/vincajs/vinca-ui

benjamincanac · 2024-03-13T09:45:53Z

@robin-dongbin It's already in the making. There are already 13 components done, 36 more to go 😅

robin-dongbin · 2024-03-13T09:54:01Z

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

benjamincanac · 2024-03-13T10:29:15Z

This is actually already what we're doing with the App Config. You can customize the classes for every part of every component.

aspitrine · 2024-03-13T19:32:47Z

Thanks for the work!
i’m impatient to try this!

Just one question :

The biggest change is the switch to tailwind-variants, this will cause lots of breaking changes if you've used the ui prop or app.config.ts to override the config.

app.config.ts is deprecated and it will not port in v3? Or it’s something else?

benjamincanac · 2024-03-13T20:25:29Z

No we keep the app.config.ts, what I meant is since we now use tailwind-variants the config itself changes.

For example the Kbd component, its config looked like this:

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 app.config.ts or through the ui prop. I'm thinking of a CLI or something that would help people migrate from v2 to v3 without too much trouble but it might not be easy to achieve. Everything is fully typed so this will give some indications at least.

aspitrine · 2024-03-13T20:49:29Z

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 🙏🏻

GalacticHypernova · 2024-11-29T18:09:38Z

@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

MickL · 2024-11-29T20:34:01Z

@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.

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.

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.

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)

GalacticHypernova · 2024-11-29T20:49:45Z

I dont see any difference between a "toast" as you say and a phone notification.

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)

MickL · 2024-11-29T20:53:37Z

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.

madsh93 · 2024-12-03T12:44:11Z

Hi Benjamin!

Just trying out Nuxt UI 3. I've noticed that with UInput the returntype of @update:model-value is always string | number even though type is set to text. In this case it can never return the type number as far as I know.

However an input with type number can, when the field is empty.

export interface InputEmits {
  (e: 'update:modelValue', payload: string | number): void
  (e: 'blur', event: FocusEvent): void
  (e: 'change', event: Event): void
}

bpolaszek · 2024-12-04T13:54:56Z

Hello Benjamin!

Newbie to @nuxt/ui (never used it before), I'm currently trying the new v3 beta.

3 questions:

Overriding theme seem to occur in some app.config.ts but it looks like nothing makes reference to it. You're supposed to use defineAppConfig which is a function I couldn't find anywhere (auto-imports are turned off on my projects). Is it some legacy stuff borrowed from v2 and not updated in the docs or just something not documented enough?
How could I override the theme of, let's say, buttons, by just appending cursor-pointer to the existing theme classes (e.g. without replacing the whole buttons theme with only that class)?
Would you consider enabling Discussions on this repository so that Q&As can be filed in a dedicated space?

Thank you!
Ben

benjamincanac · 2024-12-04T13:59:38Z

No sorry, I don't like Discussions and rather keep everything is Issues. Also, I'm using a tool called Volta (volta.net) made by me at NuxtLabs to manage open-source and it doesn't support Discussions.

defineAppConfig is from Nuxt: https://nuxt.com/docs/getting-started/configuration#app-configuration, you can import it from #imports if you disabled auto-imports.
To override components, everything is documented here: https://ui3.nuxt.dev/getting-started/theme#customize-theme

bpolaszek · 2024-12-04T14:50:00Z

Alright, nothing worked as expected on my side (existing Nuxt4 + TailwindCSS 4-beta project) but recreating my project based on @nuxt/ui's starter did the trick. 🤷

Didn't even know about defineAppConfig though it looks pretty common! 😅

Sorry for bothering!
Ben

MickL · 2024-12-04T15:31:59Z

@benjamincanac I was trying v3 for a bit and I just wanted to give you and everyone else who was involved my biggest respect and say that I am amazed by all the work that has been done! I was hoping for a bit of visual improvements, for example the examples Reka UI showcases look a bit cleaner to me. And I was not disappointed, I see tiny visual improvements everywhere, and an all new design for at least the Table which I really like. Further what I really like is that it seems way more customizable. Some things are not hardcoded anymore (e.g. button doesnt have cursor-pointer class) which seems a bit cumberstone at first but just makes everything more flexible. The same goes for the new slot system. A highly requested feature was that components can be customized globally, and this can be done now for each component and their slots. Further I really like the improved docs! At the start of every component we have the basic usage, no more need to search for features! Then there is an examples section that shows most common specific use cases. And on top of everything you added new components like calendar, stepper and for example the carousel seems to be working SO much better.

Keep up the good work, cant wait for first beta!

Btw I recommend everyone to use latest commit until next alpha comes out, because alpha 9 currently doesnt use Reka UI. @benjamincanac is pushing new commits kinda every minute, to install current latest commit: bun add https://pkg.pr.new/@nuxt/ui@e791031

divine · 2024-12-07T08:09:29Z

Hello,

Looks like the new Dropdown lost mode functionality https://ui.nuxt.com/components/dropdown#mode.

@benjamincanac will this be added back or removed completely?

I've still few issues that are still bugging me (I'll report later today) but looks nearly perfect.

Thank you for the great work :)

benjamincanac · 2024-12-07T17:03:07Z

@divine #2138

madsh93 · 2024-12-16T14:23:03Z

Hey Benjamin

Any chance we can get click events on rows on the table? I'd like an entire row to navigateTo a different page. Currently not possible.

clopezpro · 2024-12-16T14:39:45Z

Hey Benjamin

Any chance we can get click events on rows on the table? I'd like an entire row to navigateTo a different page. Currently not possible.

Soon you could check this PR #2822 . I based it on the tanstack documentation https://tanstack.com/table/latest/docs/guide/row-selection#connect-row-selection-apis-to-ui, however it did not pass the tests Because I still don't have much experience in it, the idea was to do something similar to version 2 in which you could also use a @select event in this case to opt for Row Row APIs of tanstack and the click event

MickL · 2024-12-16T15:11:00Z

I had a few of issues with @select in v2 especially in combination with buttons / dropdowns. But I also think being able to click an item would be super important!

madsh93 · 2024-12-16T15:24:16Z

Hey Benjamin

Any chance we can get click events on rows on the table? I'd like an entire row to navigateTo a different page. Currently not possible.

Soon you could check this PR #2822 . I based it on the tanstack documentation https://tanstack.com/table/latest/docs/guide/row-selection#connect-row-selection-apis-to-ui, however it did not pass the tests Because I still don't have much experience in it, the idea was to do something similar to version 2 in which you could also use a @select event in this case to opt for Row Row APIs of tanstack and the click event

Exciting. Will be good to have. That will be the last thing I am missing. I am currently trying to implement column reordering, which is is possible with the API but I'd prefer drag and drop which is complex.

MickL · 2024-12-16T15:27:50Z

Btw ordering is the only thing Nuxt UI is missing. Currently I use sortablejs in my project (but not within a table)

madsh93 · 2024-12-17T20:44:48Z

I wouldn't know how to do drag and drop with the table, but sortablejs looks cool @MickL . Tanstack table is already a steep learning curve for me.

I managed to get this working:

And to make it more complex, I try to put all filters, sortings and column order in localStorage such that users can save their tables.

madsh93 · 2024-12-17T20:46:04Z

Probably too late, but having a clearable prop on USelectMenu would be highly appreciated :-)

MickL · 2024-12-17T22:04:25Z

Probably too late, but having a clearable prop on USelectMenu would be highly appreciated :-)

I was looking for this too! Actually exactly in this moment I integrated it myself but I would also appreciate if things like SelectMenu and InputMenu could have a clear/reset button or something

sandros94 · 2024-12-18T12:49:02Z

Probably too late, but having a clearable prop on USelectMenu would be highly appreciated :-)

you just have to clear the model value to unselect something, this can be easily achieved with a UButtonGroup like:

<script setup lang="ts">
const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
const value = ref<string>()
</script>

<template>
  <UButtonGroup>
    <USelectMenu v-model="value" :items="items" class="w-48" />
    <UButton icon="i-lucide-x" @click="value = undefined" />
  </UButtonGroup>
</template>

MickL · 2024-12-18T13:21:03Z

Thats how I did it. But you also need to keep track of if the reset button should be shown. For example one would say v-if="value" but this doesnt work if the value is 0 for example.

Imo it would make sense for this components to have a reset function built into Nuxt UI. BUT maybe there would be too many different requirements: One might want to be able to deselect a value in the select menu, this currently works only with multiple. Some might want to have an X integrated in the dropdown. Some others may want a delete icon next to the dropdown or a reset link button under it.

benjamincanac · 2024-12-18T13:28:28Z

@MickL That is exactly the reason why we've never implemented it, there are so many different possibilities to achieve this that it's easier to do it yourself honestly.

You can add a clear button using the #trailing slot, something like https://ui3.nuxt.dev/components/input#with-clear-button
You can use a ButtonGroup as @sandros94 mentioned
You can add an item inside the items with onSelect: (e) => e.preventDefault() and handle the logic there

MickL · 2024-12-18T13:34:36Z

Oh wow this 1. is a nice solution. Maybe this example could be added to InputMenu and SelectMenu as well! Also maybe the other two points could be at least mentioned in the docs (may dont need a code example).

What could be done tho for SelectMenu is the possibility to check an item off again? It works with multiple but not for single values.

benjamincanac · 2024-12-18T13:41:20Z

I'll add the examples! This would be an issue for Reka UI's Combobox component.

MickL · 2024-12-29T12:29:24Z

Shouldnt be Drawer and Slideover the same component? As far as I see the only difference is that a Drawer has an optional handle. Slideover is missing the "swipe to close" feature, but this I would definitely add to it as it is a common user behavior using mobile devices.

Personally I would remove Slideover, rename Drawer to Slideover and hide the handle by default.

mrwwalmsley · 2024-12-30T04:18:03Z

Nuxt UI Pro v3
You mentioned above that all the Nuxt UI Pro v3 components are implemented except for dashboard. When will these be made available as an alpha release? I'd love to start trying them out even if the documentation is not yet available.
Nuxt UI Pro documentation feedback

One thing I found a little confusing in the Nuxt UI Pro v2 documentation was trying to work out the difference between components with similar names: e.g. LandingCard vs PageCard or LandingGrid vs PageGrid. I had to look at the config code, but it would be good if the opening description had a little more detail to explain what that component did.

Nuxt UI Pro v3 Footer component issue

When you shrink the screen down to mobile mode, the default slot is left aligned instead of centre aligned like the left and right slots.

sandros94 · 2024-12-30T11:25:41Z

Shouldnt be Drawer and Slideover the same component? As far as I see the only difference is that a Drawer has an optional handle. Slideover is missing the "swipe to close" feature, but this I would definitely add to it as it is a common user behavior using mobile devices.

Personally I would remove Slideover, rename Drawer to Slideover and hide the handle by default.

Unfortunately, they are based on two completely separate tools, as you can read from the linked documentation.

Slideover comes from Reka UI's Dialog component, the same used for UModal. It is meant to be more stable and better supported since it is part of the main library.
Drawer on the other hand is still on its own project being only a Dialog replacement (in fact, it is built on top of it) for mobile and tablet use. More importantly it is still under a radix-vue implementation, last major before Reka UI. This means that there will be further breaking changes if that component will be kept active.

This would be more of an upstream discussion. But I personally use them both, depending on UI design and project's device target.

MickL · 2024-12-30T12:12:39Z

Doesnt it make sense to unify them when one is better supported? Personally I would love to use slideover but it doesnt have a swipe to close feature. Without the follow-pointer-movement, like Drawer has, it would be easily implemented by https://vueuse.org/core/useSwipe/

neok · 2025-01-01T19:24:01Z

When do you plan to release dashboard for v3?

benjamincanac added the v3 #1289 label Jan 29, 2024 — with Volta.net

benjamincanac pinned this issue Jan 29, 2024

benjamincanac added release and removed v3 #1289 labels Jan 29, 2024

benjamincanac changed the title ~~Major v3.0 release~~ v3.0 release Jan 29, 2024

benjamincanac changed the title ~~v3.0 release~~ Next v3.0 release Jan 29, 2024

benjamincanac mentioned this issue Mar 4, 2024

feat(Table): generic table #1446

Closed

8 tasks

benjamincanac changed the title ~~Next v3.0 release~~ v3.0 Mar 4, 2024

benjamincanac self-assigned this Mar 6, 2024

benjamincanac mentioned this issue Mar 8, 2024

Now that Tailwind 4 is coming? #1489

Closed

This was referenced Mar 9, 2024

Migrate to radix-vue #409

Closed

feat(Alert): add icon & avatar slots #1401

Merged

Collaborators #1498

Closed

benjamincanac mentioned this issue Mar 13, 2024

Adaptation for vue? #1514

Closed

sandros94 mentioned this issue Dec 30, 2024

docs(Footer): UNavigation not centered on mobile #3000

Open

v3 #1289

v3 #1289

Comments

benjamincanac commented Jan 29, 2024 • edited Loading

Documentation

Roadmap (Nov 20, 2024)

Breaking Changes

Components

sandros94 commented Jan 31, 2024

benjamincanac commented Feb 1, 2024

jd-solanki commented Feb 9, 2024

benjamincanac commented Mar 4, 2024

sawa-ko commented Mar 5, 2024

benjamincanac commented Mar 6, 2024 • edited Loading

benjamincanac commented Mar 6, 2024 • edited Loading

ghost commented Mar 8, 2024

benjamincanac commented Mar 8, 2024

robin-dongbin commented Mar 13, 2024

benjamincanac commented Mar 13, 2024

robin-dongbin commented Mar 13, 2024

benjamincanac commented Mar 13, 2024

aspitrine commented Mar 13, 2024

benjamincanac commented Mar 13, 2024

aspitrine commented Mar 13, 2024

GalacticHypernova commented Nov 29, 2024 • edited Loading

MickL commented Nov 29, 2024 • edited Loading

GalacticHypernova commented Nov 29, 2024

MickL commented Nov 29, 2024

madsh93 commented Dec 3, 2024 • edited Loading

bpolaszek commented Dec 4, 2024

benjamincanac commented Dec 4, 2024

bpolaszek commented Dec 4, 2024

MickL commented Dec 4, 2024 • edited Loading

divine commented Dec 7, 2024

benjamincanac commented Dec 7, 2024

madsh93 commented Dec 16, 2024

clopezpro commented Dec 16, 2024

MickL commented Dec 16, 2024

madsh93 commented Dec 16, 2024

MickL commented Dec 16, 2024

madsh93 commented Dec 17, 2024

madsh93 commented Dec 17, 2024

MickL commented Dec 17, 2024

sandros94 commented Dec 18, 2024

MickL commented Dec 18, 2024

benjamincanac commented Dec 18, 2024

MickL commented Dec 18, 2024

benjamincanac commented Dec 18, 2024

MickL commented Dec 29, 2024 • edited Loading

mrwwalmsley commented Dec 30, 2024 • edited Loading

sandros94 commented Dec 30, 2024

MickL commented Dec 30, 2024

neok commented Jan 1, 2025

benjamincanac commented Jan 29, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

GalacticHypernova commented Nov 29, 2024 •

edited

Loading

MickL commented Nov 29, 2024 •

edited

Loading

madsh93 commented Dec 3, 2024 •

edited

Loading

MickL commented Dec 4, 2024 •

edited

Loading

MickL commented Dec 29, 2024 •

edited

Loading

mrwwalmsley commented Dec 30, 2024 •

edited

Loading