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

feryardiant · 2024-05-23T09:33:59Z

VerticalNavigation / HorizontalNavigation should be NavigationMenu with an orientation prop

I whish that component (especially on orientation="vertical" had some way to keep the NavigationMenuSub expanded when its submenu item is active. For context radix-vue/radix-vue#892

Even better if NuxtUI would have the vertical navigation similar to the one on Naive UI or Ant Design

icarusion · 2024-06-13T09:23:59Z

I saw that the plan is to remove the padded property of Button. I don’t know why, but this property is still very useful. For example, like the following example:

<UInput
  v-model="searchQuery"
  :ui="{ icon: { trailing: { pointer: '' } } }"
  :loading="searchLoading"
  icon="i-heroicons-magnifying-glass-20-solid"
  size="md"
>
  <template #trailing>
    <UButton
      v-show="searchQuery !== ''"
      color="gray"
      variant="link"
      icon="i-heroicons-x-mark-20-solid"
      :padded="false"
      @click="handleClear"
    />
  </template>
</UInput>

also in offical page:

In addition, SelectMenu and Button nesting have similar usages, so I hope you can consider it again. Thanks :)

@benjamincanac

benjamincanac · 2024-06-13T09:24:44Z

Why not go for class="p-0"? 🤔

icarusion · 2024-06-13T09:27:24Z

Why not go for class="p-0"? 🤔

for consistency, like Input、Textarea. But p-0 is ok 😄

benjamincanac · 2024-06-13T09:28:35Z

You can also do input-class="p-0" for example. This prop was before we ever used tailwind-merge, its kind of obsolete now with class merging. This is why we're removing it in v3 😊

divine · 2024-06-13T21:18:02Z

Hello,

Just a small feature request regarding Table component in v3.

I've tried to use the Table component and had some problems with the applying classes ("global class") to rows.

According to documentation to apply classes to rows I need to push class property for each item.

This might be solved with using computed property but when data comes from API and you've a lot of data it might affect performance.

ui/src/runtime/components/data/Table.vue

Line 74 in 89d18f8

    
                       <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, row[column.key]?.class]">

Instead of searching for class property in each row it'll be awesome to use data from column or provide some function which in return will give the class that it needs to apply.

Basically, I was looking for a "global" class property for the row like what we currently have in a column.

class - The class to apply to the column cells.

Maybe something like this:

rowClass - The class to apply to the row cells.

Thank you very much for your work and the effort with this UI.

This is great honestly. 👍

Mat4m0 · 2024-06-26T05:28:44Z

Would it be possible to have this Comment Component Feature for Nuxt UI Components?

It would be really helpful to have at least a Link directly to the Docs.

Many thanks and keep up your awesome work

jd-solanki · 2024-06-26T05:49:36Z

As we'll have v3 which will possibly bring some breaking changes can you please reconsider this?

#886 (comment)

Also, If I want to start new project using Nuxt v4 compatibility & Nuxt UI 3 is it possible now (anything like Alpha)? If not, can you share any approx time so I can schedule my projects accordingly.

T-Zahil · 2024-06-26T07:50:17Z

Also, If I want to start new project using Nuxt v4 compatibility & Nuxt UI 3 is it possible now (anything like Alpha)? If not, can you share any approx time so I can schedule my projects accordingly.

#1841 (comment) 😊

jd-solanki · 2024-06-26T08:14:01Z

@T-Zahil Thanks for your response but it'll serve the NuxtUI.

However, I want to consume it in my own project (like third party package) and still I'm waiting for confirmation on if it's even advisable to use in my project?

messenjer · 2024-06-26T09:02:30Z

@T-Zahil Thanks for your response but it'll serve the NuxtUI.

However, I want to consume it in my own project (like third party package) and still I'm waiting for confirmation on if it's even advisable to use in my project?

Nuxt UI 3 will use tailwind v4, so it's also linked to the release of tailwind v4

MickL · 2024-06-26T09:38:12Z

I am excited for Nuxt UI 3 and Tailwind 4 but I think we need to wait a bit more for Tailwind 4 to come :)

Btw isnt Nuxt UI then also linked to the release of @nuxtjs/tailwindcss?

nuxt-modules/tailwindcss#820

reslear · 2024-06-29T12:47:04Z

I am excited for Nuxt UI 3 and Tailwind 4 but I think we need to wait a bit more for Tailwind 4 to come :)

Btw isnt Nuxt UI then also linked to the release of @nuxtjs/tailwindcss?

nuxt-modules/tailwindcss#820

And UnoCss

HigherOrderLogic · 2024-06-29T13:23:07Z

UnoCss isn't related.

UlugbekNG · 2024-07-12T05:06:29Z

Hello everyone. Is there any news about UI 3 or approximate release date. I'm looking forward this new release.

Sandros94 · 2024-07-12T09:41:14Z

Hello everyone. Is there any news about UI 3 or approximate release date. I'm looking forward this new release.

As a rule of thumb, after the official release of Tailwind v4

uAtomicBoolean · 2024-07-15T17:13:57Z

It looks like it won't be for anytime soon sadly as they hope to move from alpha to beta by the end of summer and release a stable version later in the year.
tailwindlabs/tailwindcss#13938 (comment)

MickL · 2024-07-15T17:28:04Z

Do we really need to wait for official release? Maybe we can start a v3 beta with the Tailwind beta?

benjamincanac · 2024-07-16T09:05:36Z

Of course, we'll release a beta package with Tailwind CSS v4 beta as soon as they implement what's missing 😊

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

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

This was referenced Jun 5, 2024

Question about v3 #1841

Closed

SelectMenu auto-picks first on blur #1708

Open

benjamincanac mentioned this issue Jun 13, 2024

Dropdown supports nesting #1865

Open

benjamincanac mentioned this issue Jun 24, 2024

feat(Icon)!: migrate from @egoist/tailwindcss-icons to new @nuxt/icon #1789

Merged

8 tasks

maximepvrt mentioned this issue Jul 2, 2024

[Avatar] Support NuxtImg #1577

Closed

benjamincanac mentioned this issue Jul 2, 2024

How to open InputMenu programmatically #1936

Closed

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

MuhammadM1998 commented May 3, 2024 • edited Loading

feryardiant commented May 23, 2024

icarusion commented Jun 13, 2024

benjamincanac commented Jun 13, 2024

icarusion commented Jun 13, 2024

benjamincanac commented Jun 13, 2024

divine commented Jun 13, 2024

Mat4m0 commented Jun 26, 2024

jd-solanki commented Jun 26, 2024

T-Zahil commented Jun 26, 2024 • edited Loading

jd-solanki commented Jun 26, 2024

messenjer commented Jun 26, 2024

MickL commented Jun 26, 2024 • edited Loading

reslear commented Jun 29, 2024

HigherOrderLogic commented Jun 29, 2024

UlugbekNG commented Jul 12, 2024

Sandros94 commented Jul 12, 2024

uAtomicBoolean commented Jul 15, 2024

MickL commented Jul 15, 2024

benjamincanac commented Jul 16, 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

MuhammadM1998 commented May 3, 2024 •

edited

Loading

T-Zahil commented Jun 26, 2024 •

edited

Loading

MickL commented Jun 26, 2024 •

edited

Loading