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.

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

MuhammadM1998 · 2024-03-28T18:20:45Z

This commit 49b73aa made me think that NuxtUI could automatically use <NuxtImage> if installed and fallback to <img> otherwise

maximepvrt · 2024-03-28T19:29:55Z

I was hesitant about do a PR to add a UImg component which returns either an img or nuxtimg element depending on whether the nuxt image module is present.

Celibioux · 2024-03-28T19:58:27Z

@benjamincanac thanks for your quick answer and you're right but the idea came from seen many folks ask for unocss integration so unstyled could be possible to use unocss for styling ? And Yes there is Radix_vue and many out there but We Are NUXTERS 😂 We Love Nuxt and All its Ecosys

robin-dongbin · 2024-03-29T01:28:07Z

@benjamincanac thanks for your quick answer and you're right but the idea came from seen many folks ask for unocss integration so unstyled could be possible to use unocss for styling ? And Yes there is Radix_vue and many out there but We Are NUXTERS 😂 We Love Nuxt and All its Ecosys

The preset api I mentioned above solves this problem as well. It decouples nuxt-ui from tailwindcss, giving the user the freedom to use any css tool of their choice to provide the styles.

The ui library can even remove the tailwindcss dependency and only provide tailwindcss presets, allowing the user to install the taiwindcss dependency and compile the presets on the user side.

Official presets can provide classes compatible with tailwindcss and unocss. The user is free to choose either unocss or tailwindcss.Even if they prefer another css tool, they can completely redefine their styles using another css tool.

I've been pitching the preset api I came up with, but @benjamincanac don't seem to be interested 😂 .

ChrisGV04 · 2024-03-31T06:15:11Z

I believe what @robin-dongbin is saying about the presets is very similar to what Shadcn UI does with the "default" and "New York" theme to change the appearance of every component. Maybe something like this could exist for Nuxt UI, but I'm not sure, since Shadcn does that by giving you the files for each component.

However, I agree with @benjamincanac saying that if you already intend to use Nuxt UI completely unstyled, try using Radix Vue to build the components yourself. You might find that very useful.

Radix Vue gives you full control over the styling of your components, while providing accessibility and the complex logic of the components for free. Use vanilla CSS, Tailwind, UnoCSS... whatever you consider best.

Nuxt UI is meant to give you good looking, opinionated and pre-styled UI components, but expose the API to customize them when needed. And in my opinion, it does it wonderfully.

I invite you to take a look at Radix Vue to build your own components if you apply to any of the following:

You end up changing the UI of almost every component to match your branding.
You don't agree with the choices for the stack (Tailwind, TanStack Virtual, etc.).
You need a component that is not currently offered by Nuxt UI.
You need to add custom logic/behavior to your components internally.

I won't lie... It can be significantly more work. But it is worth it if you really need it.

Celibioux · 2024-03-31T06:23:04Z

@ChrisGV04 Thank you for your time replying on this really great answer

benjamincanac · 2024-04-25T15:50:43Z

I forgot to mention that the repository we're working on is public if you want to check out the progress: https://github.com/benjamincanac/ui3.

The development is going very well, we're only missing 12 components and I can say that maintaining this version will be significantly easier. Also, contributing will be effortless with the internal CLI we created to initialize components: https://github.com/benjamincanac/ui3/blob/dev/cli/templates.mjs.

I can't wait to finally release this 😊

MickL · 2024-04-25T15:57:36Z

With v3 can we have table footers? ❤️ #1025

alexcroox · 2024-04-25T18:15:55Z

With v3 can we have table footers? ❤️ #1025

And sticky headers!

alihardan · 2024-04-26T13:41:54Z

I forgot to mention that the repository we're working on is public if you want to check out the progress: https://github.com/benjamincanac/ui3.

The development is going very well, we're only missing 12 components and I can say that maintaining this version will be significantly easier. Also, contributing will be effortless with the internal CLI we created to initialize components: https://github.com/benjamincanac/ui3/blob/dev/cli/templates.mjs.

I can't wait to finally release this 😊

Awesome work ❤️
What about Vue compatibility? Will we definitely see it in the next major release?

maximepvrt · 2024-04-26T14:29:44Z

I was hesitant about do a PR to add a UImg component which returns either an img or nuxtimg element depending on whether the nuxt image module is present.

@benjamincanac I added something similar on @nuxtjs/mdc https://github.com/nuxt-modules/mdc/pull/180/files

maximepvrt · 2024-04-26T14:40:01Z

Would it be possible to update UAvatar to be compatible with masks in v3? The Squirqle mask looks amazing! 🤩

I feel like this isn't currently possible with a chip #1627

MuhammadM1998 · 2024-05-03T12:47:03Z

~~Nuxt Icon beta implements the offline usage from iconify and supports SSR. Will it be integerate in v3 and drop egoist/tailwndcss module?~~ It already does

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

Open

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

Merged

Collaborators #1498

Open

benjamincanac mentioned this issue Mar 13, 2024

Adaptation for vue? #1514

Closed

This was referenced Mar 28, 2024

bug/feat: additional colors support #213

Closed

[UDropdown]: Not work on clicking on its element on mobile #1337

Open

This was referenced Apr 8, 2024

Button Shade #1626

Closed

Toast Position #808

Open

Please add instructions about the position of the notification #1600

Closed

feat(Ladder): new component #976

Closed

benjamincanac changed the title ~~v3.0~~ v3 Apr 11, 2024

ineshbose mentioned this issue Apr 21, 2024

feat(module): HMR support with @nuxtjs/tailwindcss #1665

Merged

6 tasks

benjamincanac mentioned this issue May 10, 2024

Can we have resize component? #1774

Open

Sandros94 mentioned this issue May 12, 2024

<USelectMenu> Options Menu Transition Update #1521

Open

benjamincanac mentioned this issue May 14, 2024

space between buttons in buttonGroup OR more styles for RadioGroup #1786

Open

kadumedim mentioned this issue May 16, 2024

Loading property for UDropdown Items #1795

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v3 #1289

v3 #1289

benjamincanac commented Jan 29, 2024 •

edited

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

benjamincanac commented Mar 6, 2024 •

edited

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

MuhammadM1998 commented Mar 28, 2024

maximepvrt commented Mar 28, 2024

Celibioux commented Mar 28, 2024

robin-dongbin commented Mar 29, 2024

ChrisGV04 commented Mar 31, 2024 •

edited

Celibioux commented Mar 31, 2024

benjamincanac commented Apr 25, 2024

MickL commented Apr 25, 2024

alexcroox commented Apr 25, 2024

alihardan commented Apr 26, 2024

maximepvrt commented Apr 26, 2024

maximepvrt commented Apr 26, 2024

MuhammadM1998 commented May 3, 2024 •

edited

v3 #1289

v3 #1289

Comments

benjamincanac commented Jan 29, 2024 • edited

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

benjamincanac commented Mar 6, 2024 • edited

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

MuhammadM1998 commented Mar 28, 2024

maximepvrt commented Mar 28, 2024

Celibioux commented Mar 28, 2024

robin-dongbin commented Mar 29, 2024

ChrisGV04 commented Mar 31, 2024 • edited

Celibioux commented Mar 31, 2024

benjamincanac commented Apr 25, 2024

MickL commented Apr 25, 2024

alexcroox commented Apr 25, 2024

alihardan commented Apr 26, 2024

maximepvrt commented Apr 26, 2024

maximepvrt commented Apr 26, 2024

MuhammadM1998 commented May 3, 2024 • edited

benjamincanac commented Jan 29, 2024 •

edited

`Accordion`

`Avatar`

`Button`

`Divider`

`Dropdown`

`Form`

`Link`

`Toggle`

`Popover`

`Tabs`

`Tooltip`

`Modal` / `Slideover`

`VerticalNavigation` / `HorizontalNavigation`

benjamincanac commented Mar 6, 2024 •

edited

benjamincanac commented Mar 6, 2024 •

edited

ChrisGV04 commented Mar 31, 2024 •

edited

MuhammadM1998 commented May 3, 2024 •

edited