v3

[benjamincanac]

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

---

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)

• [ ] Finish the migration to reka-ui@alpha on @nuxt/ui & @nuxt/ui-pro
• [ ] Write the docs for implemented @nuxt/ui-pro components
• [ ] Finish @nuxt/ui-pro components (almost all are done except for Dashboard)
• [ ] Make Nuxt UI Pro v3 work with Vue like Nuxt UI
• [ ] Implement new components in @nuxt/ui like Calendar, DateInput, DatePicker, Tree, Stepper, etc.
• [ ] Migrate all the Nuxt UI Pro templates (starter, landing, docs, saas and dashboard)
• [ ] Write a complete migration guide
• [ ] Build the Nuxt UI docs marketing pages (landing, pricing, templates, etc.)
• [ ] Migrate all the Nuxt apps (nuxt.com, image.nuxt.com, eslint.nuxt.com, devtools.nuxt.com, fonts.nuxt.com, hub.nuxt.com, nuxt.studio, etc.)
• [ ] Release @nuxt/ui & @nuxt/ui-pro officially once tailwindcss and reka-ui are released
• [ ] Make new @nuxt/ui-pro components & 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 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.

### Components
- [x] Accordion
- [x] Alert
- [x] Avatar
- [x] AvatarGroup
- [x] Badge
- [x] Breadcrumb
- [x] Button
- [x] ButtonGroup
- [x] Card
- [x] Carousel
- [x] Checkbox
- [x] Chip
- [x] Collapsible
- [x] CommandPalette
- [x] Container
- [x] ContextMenu
- [x] Drawer
- [x] DropdownMenu (Dropdown)
- [x] Form
- [x] FormField (FormGroup)
- [x] Icon
- [x] Input
- [x] InputMenu
- [x] Kbd
- [x] Link
- [x] Modal
- [x] NavigationMenu (HorizontalNavigation/VerticalNavigation)
- [x] Pagination
- [x] Popover
- [x] Progress
- [x] Provider
- [x] RadioGroup
- [x] Select
- [x] SelectMenu
- [x] Separator (Divider)
- [x] Skeleton
- [x] Slideover
- [x] Slider (Range)
- [x] Table
- [x] Tabs
- [x] Textarea
- [x] Toast (Notification)
- [x] Switch (Toggle)
- [x] Tooltip

[benjamincanac]

Indeed, last week I've finally moved the development on the v3 branch of this repository rather than my fork: https://github.com/nuxt/ui/tree/v3

@maximepvrt I just asked @romhml and he confirmed that this was going to be implemented on the v3 branch soon!

[flozero]

hey @benjamincanac hope you are doing good. I was looking at the lib and see you were planning to use tailwind variants.

I would suggest you to use tailwind buddy instead https://busbud.github.io/tailwind-buddy/

Its a library I have built for my company that we use for our different design systems that may best fit for the project.

I have done this library because tailwind variant do not handle properly responsive variants and compound variants.

• It is faster than CVA that is the parent of tailwind variant and mine for simple use case and even more faster when it comes to complex compound and responsive. CVA is way faster than TVA so mine is even faster
• I believe I do have quite the same api. I found mine more consistent.

As you can imagine this is SSR first as the others

I was looking to give you a proof of concept but I am bit lost in how your module is structured. I will try to have a better look later.

I saw you were using the generateSafe list for the colors so you won't be lost in how I am doing my plugin to handle responsivnes classes as they can't be static analized by tailwind.

I would be super happy to discuss with you about it and see if we can setup a quick poc. My discord name is flozero.

A TLDR about me I know @danielroe a bit and follow his streams a lot. I also maintain two other nuxt modules, stripe and snipcart.

Edit: Migrate to tailwind-buddy should be pretty easy as I have done it on our design systems its just a matter of small re organizations and the setup is different

[vikas-nautiyal-compro]

Hi @benjamincanac,

I would like to ask for a tentative release date for the v3.

We are evaluating a UI libraries for our new Nuxt-3 based Admin Panel and are considering Nuxt UI. We are particularly interested in the upcoming v3 release for Nuxt UI.

Could you please provide an estimated timeline for the v3 release?

Additionally, we would appreciate your advice on whether it would be more beneficial to start our project with the current v2 version or wait for the v3 release.

[MickL]

We are also about to start a new project and I would love to start with v3 already. Can we have an alpha release maybe? This would also ensure users already reporting bugs :)

[benjamincanac]

⚠️ Please be aware that this not a public announcement to try out the alpha as I haven't finished the documentation.

I see that everyone is in a hurry to try it so I don't see the issue to share some markdown from the docs:

1. Install the Nuxt UI v3 alpha package:

npm add @nuxt/ui@next

2. Register the Nuxt UI module in your nuxt.config.ts (like before):

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

3. Import Tailwind and Nuxt UI in your CSS:

<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>

This is done here in the <style> block of your app.vue file, but you can also do it in a CSS file.

[MickL]

Amazing, thanks!

Just to clarify, is this using Tailwind 4 directly or @nuxtjs/tailwindcss?

[benjamincanac]

Nuxt UI v3 uses Tailwind CSS v4 yes: https://github.com/nuxt/ui/blob/v3/package.json#L61

[KeyboardDabbler]

Amazing, thanks!

Just to clarify, is this using Tailwind 4 directly or @nuxtjs/tailwindcss?

"tailwindcss": "4.0.0-alpha.23",

[jsayer101]

Hi @benjamincanac any hints on how to test ui3 with pro version (and maybe try pro v2) ? 😄

[benjamincanac]

@jsayer101 Nuxt UI Pro v2 is far from over as I've only done the components to actually build the Nuxt UI v3 docs yet.

However, you can try it out as such:

1. Install the Nuxt UI Pro v2 alpha package:

npm add @nuxt/ui-pro@next

You don't need to install @nuxt/ui@next as it's already a dependency of @nuxt/ui-pro

2. Register the Nuxt UI Pro module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

Nuxt UI Pro is now a module that will install @nuxt/ui for you.

3. Import Tailwind and Nuxt UI Pro in your CSS:

<style>
@import "tailwindcss";
@import "@nuxt/ui-pro";
</style>

The @nuxt/ui-pro CSS already imports @nuxt/ui for you

[NeroThroN]

I see that everyone is in a hurry to try it so I don't see the issue to share some markdown from the docs:

Hi @benjamincanac, thanks a lot for all the work and dedication on version 3 for months now and for this first alpha version

I don't want to waste your time or delay you with this issue since there was no official announcement of the alpha version, but I can't use this version. I wanted to create a new clean project to play with it and see the differences and the performance gain, but I can't get it to work

After creating an empty Nuxt project and installing Nuxt UI following your instructions, I can use successfully the tailwind classes, but none of NuxtUI's components, I have these errors:

With Bun


With NPM


Am I the only one having this problem or is it a configuration issue?

[benjamincanac]

You have to make sure to install typescript as devDependency in your app.

[NeroThroN]

Indeed, it works! Thanks for this quick answer

[miguelrk]

Very happy that the alpha is out! With regards to @nuxt/ui-pro, is the v2 issue tracker up to date regarding the ui-pro components already ported to v2? I'm guessing any attempt to use ui@v3 together with ui-pro@v1 would be discouraged right? I do rely on many ui-pro components but would be willing to give the alpha a try if this is indeed viable.

[benjamincanac]

@miguelrk As mentioned in https://github.com/nuxt/ui/issues/1289#issuecomment-2343187466, Nuxt UI Pro v2 only has a few components at the moment. You won't be able to use Nuxt UI Pro v2 with Nuxt UI v2 it will not work.

As soon as the docs for UI v3 is done, I'll finish UI Pro v2 😊

[larrasu]

Will a new license be needed for UI Pro v2? Since it only includes "unlimited minor and patch updates." If yes, will the price change?

[benjamincanac]

@larrasu Nuxt UI Pro v2 will be a free update as the end result will mostly look the same but using the latest Nuxt UI v3 😊

[MuhammadM1998]

Following up on the colors, I think renaming gray to something more generic like secondary maybe a good idea. We'll No more need to rename Tailwind's built-in gray to cool and it gets confusing when you set gray value to other color than gray.

[caiotarifa]

@benjamincanac making version 3 available on a public URL could bring more people contributing and testing the components.

What about https://ui3.nuxt.dev?

[benjamincanac]

@caiotarifa The documentation will be online as soon as I've finished writing it 😊 Only 5 components left to do!

[jakubkoje]

Great work from the whole team! Just migrated our production application to test it out in dev, and it is working flawlessly (apart from small issues that are expected from early alpha, mostly tailwind related). Looking forward to stable release! ❤️

[maximepvrt]

@benjamincanac It would be great if the UCard component could support the to attribute natively, like PageCard in UI Pro, to allow direct linking.

[benjamincanac]

Here it is, you can check out the documentation for Nuxt UI v3-alpha on https://ui3.nuxt.dev/ 😊

[sharmapukar217]

I'm getting @vue/compile-sfc related issue. Could you give me some ideas to fix this. BTW, new version looks so great. I had to use radix-ui for nested dropdown menu on v2. Happy to get the v3 update. Thanks for this awesome library @benjamincanac

[benjamincanac]

@sharmapukar217 Do you have typescript installed in your devDependencies?

[sharmapukar217]

thak you. this fixed the issue, but i'm getting warings like: [Vue warn]: Extraneous non-props attributes (data-v-inspector) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. at <ConfigProvider use-id=fn<use-id> data-v-inspector=

is this something related to inheritAttrs?

[zAlweNy26]

@sharmapukar217 check this issue https://github.com/radix-vue/radix-vue/issues/1320

[divine]

Hello,

Here is another suggestion for the Table component that I'm currently trying to use.

Let's get an example Table from the documentation page:

<UTable v-model="selected" :rows="people" @select="select" />

There is an @select function that emits selection on the Table row when clicked.

function select (row) {
  const index = selected.value.findIndex((item) => item.id === row.id)
  if (index === -1) {
    selected.value.push(row)
  } else {
    selected.value.splice(index, 1)
  }
}

However, this doesn't provide any event information on which column it was clicked. For example, I'd like to allow clicking on the Checkbox and running another function when clicking on Email, for example. Basically, what I'm looking for is to allow Checkbox clicking and running a custom function when clicked on another column.

Basically, @select should provide an event in which column it was clicked. This will make the Table more customizable for different needs.

https://github.com/nuxt/ui/blob/5ed5c57d0d09ae39d623c963270bb0a894a97d29/src/runtime/components/data/Table.vue#L76

Maybe something like this:

<UTable v-model="selected" :rows="people" @select="select(row, column)" />

or another option might just to allow running checkbox solely while running another event when clicking on columns.

Thanks!

[rigtigeEmil]

Is there a rought timeline of when the Table will be available? Seems to be the biggest blocker before we'll tackle the upgrade. Looks super nice from the docs!

[benjamincanac]

@rigtigeEmil I'm working on the Carousel (#2288) and on color management with CSS variables (#2298) at the moment. The Table component will come next!

[onurusluca]

edit2: looks like I need to do pnpm add -D typescript@latest as per the new docs, which I missed lol. I am going to keep this here in case other have these problems.

---

edit: looks like this is because I have @nuxtjs/tailwindcss installed. Removed it and it is gone. But now a warning:

[plugin:vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

C:/Coding Stuff/nuxt-v3-test/.pnpm/@nuxt+ui@3.0.0-alpha.5_ioredis@5.4.1_magicast@0.3.5_postcss@8.4.47_rollup@4.24.0_vite@5.4.8_@_i2mgdftgdwi4kq7ur7kducjgum/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
56 |  
57 |  const loadingAutoState = ref(false)
58 |  const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
   |                                                         ^^^^^^^^^^^^^^^^^^^^^^
59 |  
60 |  async function onClickWrapper(event: MouseEvent) {

---

Thanks for the work on v3. Looks great. Looking forward to table and carousel. I couldn't find a place to share some feedback, sorry if this is the wrong thread.

Testing out v3, did the arrangements like docs says but got this on pnpm dev:

 ERROR  Cannot start nuxt:  Package subpath './nesting' is not defined by "exports" in C:\Coding Stuff\nuxt-v3-test\node_modules\tailwindcss\package.json

Is this a Windows path problem?

Deleted node_modules, .nuxt, pnpm-lock. Redid pnpm install and dev. Same.

Sys info:

- Operating System: Windows_NT
- Node Version:     v20.15.0
- Nuxt Version:     3.13.2
- CLI Version:      3.14.0
- Nitro Version:    2.9.7
- Package Manager:  pnpm@9.10.0
- Builder:          -
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -

Using compatibilityVersion: 4, which v2 didn't have a problem with.

[benjamincanac]

@onurusluca Are you using https://github.com/nuxt/ui/releases/tag/v3.0.0-alpha.5?

[onurusluca]

@onurusluca Are you using https://github.com/nuxt/ui/releases/tag/v3.0.0-alpha.5?

Ah sorry yes, I am.

"@nuxt/ui": "3.0.0-alpha.5",

[itpropro]

@benjamincanac do you think it makes sense to already upgrade to reka-ui (radix-vue renamed itself with 1.0)? They released the first alpha a few days ago and 1.9.6 will probably be the last radix-vue version.

[benjamincanac]

@onurusluca Please open a bug report using: https://github.com/nuxt/ui/issues/new?template=bug-v3.yml. This issue was mostly made for news.

[benjamincanac]

@itpropro It is planned already: nuxt/ui#2259. I'll tackle this next week 😊

[go4cas]

Hi @benjamincanac! looking forward to v3! Have the Meter and MeterGroups components been removed from v3?

[benjamincanac]

@go4cas They have not been implemented yet as I didn't think it was a priority. I don't think I'll re-make a Meter as it's mostly the same as Progress. However, we could re-implement a MeterGroup component, here's the issue: nuxt/ui#2322.

[onurusluca]

Is there a stackblitz or codepen template we can test the v3 with? So that we can use it on reproductions etc.

Tried to create one but getting some errors: https://stackblitz.com/edit/nuxt-ui-v3-test?file=nuxt.config.ts

Looks like a stackblitz and tailwind v4 problem: https://github.com/stackblitz/core/issues/1855

[sandros94]

Hi @onurusluca, yes currently Tailwind CSS cannot be used on stackblitz, as you have seen they are working on a compatible layer. We just need to wait for that.

About the postcss-import, you could have an hanging tailwind v3 in your node_modules/lockfile. The quickest test you could do is to delete both node_modules and lockfile and reinstall all deps.

But please, this one free from issues and other discussion. If you need further assistance feel free to tag me in a new issue or on the Nuxt's Discord server

[MickL]

I would also appreciate if this issue is now for general v3 discussions/status and not for issues and individual problems.

[caiotarifa]

Well, I saw that Radix Vue released a v1.0.0-alpha.1 with a new name (Reka UI). It's interesting since the library is currently at v1.9.7. This update has already been discussed in #409.

https://github.com/unovue/radix-vue/releases/tag/v1.0.0-alpha.1

So, the alpha version is official. Are there any plans to start testing this new version in Nuxt UI v3?

[HigherOrderLogic]

So, the alpha version is official. Are there any plans to start testing this new version in Nuxt UI v3?

See #2259. :)

[Type-32]

will other components (i.e. Tree, Editable, etc.) from radix-vue/reka-ui be wrapped into NuxtUI components?

[benjamincanac]

@Type-32 The plan is to wrap most of them yes, see https://github.com/nuxt/ui/issues?q=is:issue%20state:open%20label:feature%20label:v3. I'm thinking of building an actual DatePicker as well!

The first goal is to implement the same components as Nuxt UI v2, once it's done we'll start implementing new ones 😊

[AbdallahAlhaddad]

Hi @benjamincanac

I’d like to suggest adding the ability to configure all props dynamically, rather than being limited to defining only defaultVariants. You can check out a similar implementation in this library.

[rigtigeEmil]

Apologies if it's been answered already, but what's the plan for Nuxt UI Pro?

[sandros94]

@rigtigeEmil it has been answered multiple times above, some of them being:

1. Install the Nuxt UI Pro v2 alpha package:

   npm add @nuxt/ui-pro@next

   You don't need to install @nuxt/ui@next as it's already a dependency of @nuxt/ui-pro

2. Register the Nuxt UI Pro module in your nuxt.config.ts:

   export default defineNuxtConfig({
    modules: ['@nuxt/ui-pro']
   })

   Nuxt UI Pro is now a module that will install @nuxt/ui for you.

3. Import Tailwind and Nuxt UI Pro in your CSS:

   <style>
   @import "tailwindcss";
   @import "@nuxt/ui-pro";
   </style>

   The @nuxt/ui-pro CSS already imports @nuxt/ui for you

https://github.com/nuxt/ui/issues/1289#issuecomment-2343187466

and:

Nuxt UI Pro v2 will be a free update as the end result will mostly look the same but using the latest Nuxt UI v3 😊

https://github.com/nuxt/ui/issues/1289#issuecomment-2356367334

[luyentm]

Hi @benjamincanac

I’d like to suggest adding the ability to configure all props dynamically, rather than being limited to defining only defaultVariants. You can check out a similar implementation in this library.

Thank you for awesome work. However please add ToogleGroup component: https://www.radix-vue.com/components/toggle-group

[onurusluca]

@benjamincanac Are there any plans to add charts? With something like Unovis.