v3 #1289

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

~~We should start working on this next major by March, 2024.~~

~~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 😊.~~

~~You can check out the development progress in this fork: https://github.com/benjamincanac/ui3.~~

The development is now going 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.

Overview

Tailwind v4 https://tailwindcss.com/blog/tailwindcss-v4-alpha which should solve Reduce Tailwind CSS bundle size for unused components #877
Migrate to radix-vue #409 which should solve all v3.0 issues
Switch our internal useUI for https://www.tailwind-variants.org/
Inject theme in slots as shown here: 3a5db60#diff-8ebfa4604ad4706a0452993240719686c14ab8d3b81ebe15b1aa8201eb0282e3L4
Generic components (migrate to <script setup> [Table] Generic component #818)
Remove safelists by compiling the theme on build based on pre-defined colors which should solve Nuxt/Tailwind generates unnecessary color css definitions on colors that are not used in the project #889
Tests are done while creating components (test: components #1432 can't be merged because of dupe keys, this will be fixed by migrating to <script setup>)
Vue compatibility

Documentation

Once all these changes will be ready to merge on the dev branch, a v2 branch will be created to keep supporting the v2 version for a certain period of time. As such, the current documentation will be available on https://ui-v2.nuxt.com.

I'm thinking of removing the dev packages from the documentation, not sure it's that useful as people who are checking new pull requests from GitHub can check the new docs inside the PRs content. Therefore, the documentation will deploy from the main branch instead of the dev branch.

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.

`Accordion`

Renamed #item slot to #content for consistency
Removed usage of UButton underneath for a simple design easy to customize

`Avatar`

Removed chip prop in favor of Chip component

`Button`

Removed padded prop
block prop no longer center the text but acts as a justify between to push the trailing icon

`Divider`

Renamed to Separator for consistency

`Dropdown`

Renamed to DropdownMenu for consistency

`Form`

New implementation of the Form component. Here's a list of notable changes from v2:

Removed submit from the Form's validateOn prop
Renamed FormGroup to FormField
Renamed path to name on form errors for consistency
Added disabled prop on the Form component to disable the entire form
Added validateOnInputDelay prop on FormField and Form components to control the debounce delay on validation on input
Moved validate function's name argument to an option to make it optional
Nested Form components, allowing for complex forms with hierarchical validation

Thanks @romhml! 😊

`Link`

Renamed exposed isActive to active in default slot

`Toggle`

Renamed to Switch to be able to implement this: https://www.radix-vue.com/components/toggle.html
Renamed on-icon / off-icon props to checked-icon / unchecked-icon respectively

`Popover`

Removed overlay prop as no primitive is available for this in Radix Vue
Removed popper prop in favor of content (https://www.radix-vue.com/components/popover.html#content) and arrow prop
Renamed #panel slot to #content for consistency

`Tabs`

Renamed #item slot to #content for consistency

`Tooltip`

Removed popper prop in favor of content (https://www.radix-vue.com/components/tooltip.html#content) and arrow prop
Added #content slot for consistency
Removed prevent prop in favor of :open="false"

`Modal` / `Slideover`

Added title, description and close props (this will deprecate DashboardModal / DashboardSlideover components in @nuxt/ui-pro)
Removed appear prop (was for Headless UI)

`VerticalNavigation` / `HorizontalNavigation`

Renamed to NavigationMenu with an orientation prop
Removed #icon, #avatar and #badge slots in favor of #leading and #trailing for consistency

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

P4sca1 · 2024-08-13T16:37:17Z

Removing the prefix can cause conflicts with native HTML elements or other libraries. See https://eslint.vuejs.org/rules/multi-word-component-names.

jd-solanki · 2024-08-13T17:43:38Z

I totally agree with you but vue styleguide also recommends using titlecases components like Button instead of button.

However, It looks like keeping U prefix will be fine for community.

madsh93 · 2024-08-21T07:07:51Z

I'd prefer to know which components are from Nuxt UI and which i've created myself.

HigherOrderLogic · 2024-08-21T07:20:29Z

I'd prefer to know which components are from Nuxt UI and which i've created myself.

You can just distinguish it through the U prefix (or whatever prefix you use).

moshetanzer · 2024-08-21T08:14:33Z

@benjamincanac any thoughts on if we can fix this at least for V3 - #1992

MuhammadM1998 · 2024-09-03T10:43:55Z

Is there's any changes planned to the colors config? While designing a new app based on Nuxt UI I found it cumbersome to figure out which shade the Button for example uses for its ring. I'd have to look into the config and check all the possible variants for ring-color-300 for example then set the value of 300 shade to the color I want. Is anyone having this or am I doing something wrong?

itpropro · 2024-09-06T01:38:39Z

Is there's any changes planned to the colors config? While designing a new app based on Nuxt UI I found it cumbersome to figure out which shade the Button for example uses for its ring. I'd have to look into the config and check all the possible variants for ring-color-300 for example then set the value of 300 shade to the color I want. Is anyone having this or am I doing something wrong?

This can also be quite challenging, when you don't have your colors as shades. Many projects use for example brand colors like brand-green-bright/light or a different shading system from 1-10.
It would be great if we could adjust the colors in the config for all components (like with primary currently) instead of overwriting them for every component individually.

maximepvrt · 2024-09-10T14:41:25Z

It seems like the new repository for UI v3 is now at https://github.com/nuxt/ui/tree/v3. I noticed that there were some merge requests, such as this one, which were not merged before the previous repository was archived.

@benjamincanac Could you please confirm if this PR or its functionality will be included in the new UI v3 version?

benjamincanac · 2024-09-10T16:14:59Z

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 · 2024-09-10T16:49:36Z

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 · 2024-09-11T08:01:03Z

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 · 2024-09-11T09:23:26Z

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 · 2024-09-11T09:30:21Z

⚠️ 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:

Install the Nuxt UI v3 alpha package:

npm add @nuxt/ui@next

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

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

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 · 2024-09-11T09:38:21Z

Amazing, thanks!

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

benjamincanac · 2024-09-11T09:43:56Z

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

KeyboardDabbler · 2024-09-11T09:44:08Z

Amazing, thanks!

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

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

jsayer101 · 2024-09-11T09:50:50Z

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

benjamincanac · 2024-09-11T09:58:15Z

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

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

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.

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 · 2024-09-12T09:07:07Z

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 · 2024-09-12T09:08:22Z

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

NeroThroN · 2024-09-12T09:14:07Z

Indeed, it works! Thanks for this quick answer

miguelrk · 2024-09-12T11:24:23Z

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 · 2024-09-12T13:08:47Z

@miguelrk As mentioned in #1289 (comment), 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 · 2024-09-17T15:45:16Z

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 · 2024-09-17T16:13:49Z

@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 · 2024-09-18T15:14:43Z

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 · 2024-09-19T03:13:43Z

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

What about https://ui-v3.nuxt.com?

benjamincanac · 2024-09-19T20:29:48Z

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

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

SamandarTemirxodjayev mentioned this issue Aug 16, 2024

[Snyk] Upgrade @nuxt/ui from 2.14.2 to 2.18.2 SamandarTemirxodjayev/goshtbor#28

Open

SamandarTemirxodjayev mentioned this issue Aug 22, 2024

[Snyk] Upgrade @nuxt/ui from 2.14.2 to 2.18.3 SamandarTemirxodjayev/goshtbor#29

Open

v3 #1289

v3 #1289

Comments

benjamincanac commented Jan 29, 2024 • edited Loading

Overview

Documentation

Breaking Changes

Accordion

Avatar

Button

Divider

Dropdown

Form

Link

Toggle

Popover

Tabs

Tooltip

Modal / Slideover

VerticalNavigation / HorizontalNavigation

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

P4sca1 commented Aug 13, 2024

jd-solanki commented Aug 13, 2024

madsh93 commented Aug 21, 2024

HigherOrderLogic commented Aug 21, 2024

moshetanzer commented Aug 21, 2024 • edited Loading

MuhammadM1998 commented Sep 3, 2024

itpropro commented Sep 6, 2024

maximepvrt commented Sep 10, 2024

benjamincanac commented Sep 10, 2024

flozero commented Sep 10, 2024 • edited Loading

vikas-nautiyal-compro commented Sep 11, 2024

MickL commented Sep 11, 2024

benjamincanac commented Sep 11, 2024

MickL commented Sep 11, 2024

benjamincanac commented Sep 11, 2024 • edited Loading

KeyboardDabbler commented Sep 11, 2024

jsayer101 commented Sep 11, 2024 • edited Loading

benjamincanac commented Sep 11, 2024 • edited Loading

NeroThroN commented Sep 12, 2024

benjamincanac commented Sep 12, 2024

NeroThroN commented Sep 12, 2024

miguelrk commented Sep 12, 2024

benjamincanac commented Sep 12, 2024

larrasu commented Sep 17, 2024

benjamincanac commented Sep 17, 2024

MuhammadM1998 commented Sep 18, 2024

caiotarifa commented Sep 19, 2024 • edited Loading

benjamincanac commented Sep 19, 2024

benjamincanac commented Jan 29, 2024 •

edited

Loading

`Accordion`

`Avatar`

`Button`

`Divider`

`Dropdown`

`Form`

`Link`

`Toggle`

`Popover`

`Tabs`

`Tooltip`

`Modal` / `Slideover`

`VerticalNavigation` / `HorizontalNavigation`

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

moshetanzer commented Aug 21, 2024 •

edited

Loading

flozero commented Sep 10, 2024 •

edited

Loading

benjamincanac commented Sep 11, 2024 •

edited

Loading

jsayer101 commented Sep 11, 2024 •

edited

Loading

benjamincanac commented Sep 11, 2024 •

edited

Loading

caiotarifa commented Sep 19, 2024 •

edited

Loading