v3 #1289

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

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)

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

rigtigeEmil · 2024-11-15T16:41:39Z

@benjamincanac I've been slowly migrating existing code over, so far it's super nice!
Is the Divider component being deprecated in v3?

divine · 2024-11-15T16:43:56Z

@benjamincanac I've been slowly migrating existing code over, so far it's super nice! Is the Divider component being deprecated in v3?

I have been trying to migrate as well. Missing Meter component. Will it be added as well or depreciated?

Thanks!

benjamincanac · 2024-11-15T16:47:28Z

@rigtigeEmil Awesome! It's called Separator now to match Radix Vue: https://ui3.nuxt.dev/components/separator

@divine The Meter and MeterGroup components are the only ones I didn't migrate, I'm not entirely sure what to do about them honestly since there are no primitive on Radix Vue to rely on and also because you can almost do exactly the same thing with Progress: https://ui3.nuxt.dev/components/progress

rigtigeEmil · 2024-11-15T16:49:21Z

@rigtigeEmil Awesome! It's called Separator now to match Radix Vue: https://ui3.nuxt.dev/components/separator

@divine The Meter and MeterGroup components are the only ones I didn't migrate, I'm not entirely sure what to do about them honestly since there are no primitive on Radix Vue to rely on and also because you can almost do exactly the same thing with Progress: https://ui3.nuxt.dev/components/progress

Ah, so nice. Cheers!

divine · 2024-11-15T23:47:16Z

@divine The Meter and MeterGroup components are the only ones I didn't migrate, I'm not entirely sure what to do about them honestly since there are no primitive on Radix Vue to rely on and also because you can almost do exactly the same thing with Progress: https://ui3.nuxt.dev/components/progress

@benjamincanac what I liked with Meter is that it provided a slot indicator: https://ui.nuxt.com/components/meter#indicator-1

The new progress component doesn't have any slots. Maybe this can be added?

Also, meter group and labels were quite excellent!

Thanks!

benjamincanac · 2024-11-16T07:28:56Z

It's called status now:

MickL · 2024-11-16T09:48:25Z

Can we maybe have this fixed with v3? :)
#1905

mostafaznv · 2024-11-16T10:38:50Z

Hi Nuxt team, thanks for your great work!

Will there be a feature to define default values for component props? For example, instead of creating a MyButton component to set default values for Nuxt’s Button component, it would be great to define these defaults directly in nuxt.config.ts.

Sorry to bother you, @benjamincanac
Do you have any thoughts on this? I believe it would be an amazing feature, but I’m not sure if it’s currently a priority for you.

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.

benjamincanac · 2024-11-16T13:13:15Z

@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 color, variant, size, etc.

hywax · 2024-11-16T15:22:28Z

@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 color, variant, size, etc.

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.

MickL · 2024-11-18T16:23:42Z

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.

rigtigeEmil · 2024-11-18T16:26:22Z

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 loading indicator on most items?
https://ui3.nuxt.dev/components/button#loading

hywax · 2024-11-18T16:29:56Z

@MickL @rigtigeEmil #2668

MickL · 2024-11-18T17:48:40Z

Yes some components have this abbility but there is no standalone component

spencerjsmall · 2024-11-20T02:56:59Z

Hey! Loving v3 so far. Any timeline for when Pro v2 docs will be out?

benjamincanac · 2024-11-20T09:15:34Z

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:

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.

ikxin · 2024-11-20T13:45:44Z

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:

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)

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.

Relatively speaking, I am looking forward to it more https://ui3.nuxt.dev/pro

twf-nikhila · 2024-11-21T06:46:37Z

Any progress on using it without nuxtjs? Will purchase pro if it works

ikxin · 2024-11-21T06:57:06Z

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

twf-nikhila · 2024-11-21T07:37:44Z

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?

cbalmefrezol · 2024-11-21T08:01:47Z

@twf-nikhila @ikxin
Be careful, there are some issues with Vue #2518 !
I have the same problem.

benjamincanac · 2024-11-21T09:45:29Z

Nuxt UI Pro v3 doesn't work with Vue yet, I have to work on this.

twf-nikhila · 2024-11-21T12:04:56Z

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?

MickL · 2024-11-21T12:18:22Z

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:

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.

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.

sandros94 · 2024-11-21T18:22:21Z

Personally I would appreciate if Nuxt UI is first priority and Nuxt UI Pro comes after

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 alpha stage. Developing these 4 projects almost in parallel makes spotting and resolving issues much quicker, ending up in a much better beta and stable releases for all.

ikxin · 2024-11-22T00:58:51Z

Tailwind v4 has been in alpha for a long time 😂

adjabaev · 2024-11-22T01:04:52Z

Tailwind v4 has been in alpha for a long time 😂

Well the first beta version has been released today 😂

sharmapukar217 · 2024-11-22T06:46:38Z

how to use asChild on <UButton /> component

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

Open

benjamincanac mentioned this issue Mar 13, 2024

Adaptation for vue? #1514

Closed

mostafaznv mentioned this issue Nov 13, 2024

Add file upload component #1945

Open

hywax mentioned this issue Nov 16, 2024

Override default props from AppConfig #2662

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

rigtigeEmil commented Nov 15, 2024

divine commented Nov 15, 2024

benjamincanac commented Nov 15, 2024

rigtigeEmil commented Nov 15, 2024

divine commented Nov 15, 2024

benjamincanac commented Nov 16, 2024

MickL commented Nov 16, 2024

mostafaznv commented Nov 16, 2024

benjamincanac commented Nov 16, 2024

hywax commented Nov 16, 2024

MickL commented Nov 18, 2024

rigtigeEmil commented Nov 18, 2024

hywax commented Nov 18, 2024

MickL commented Nov 18, 2024

spencerjsmall commented Nov 20, 2024

benjamincanac commented Nov 20, 2024 • edited Loading

ikxin commented Nov 20, 2024

twf-nikhila commented Nov 21, 2024

ikxin commented Nov 21, 2024 • edited Loading

twf-nikhila commented Nov 21, 2024

cbalmefrezol commented Nov 21, 2024

benjamincanac commented Nov 21, 2024

twf-nikhila commented Nov 21, 2024

MickL commented Nov 21, 2024

sandros94 commented Nov 21, 2024

ikxin commented Nov 22, 2024

adjabaev commented Nov 22, 2024

sharmapukar217 commented Nov 22, 2024 • edited Loading

benjamincanac commented Jan 29, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Nov 20, 2024 •

edited

Loading

ikxin commented Nov 21, 2024 •

edited

Loading

sharmapukar217 commented Nov 22, 2024 •

edited

Loading