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.

Overview

Tailwind v4 https://tailwindcss.com/blog/tailwindcss-v4-alpha
Migrate to radix-vue #409 which should solve all v3.0 issues
Switch our internal useUI for https://www.tailwind-variants.org/
Generic components
Remove safelists by compiling the theme on build based on pre-defined colors
Tests
Vue compatibility #2129

Documentation

https://ui3.nuxt.dev

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

sandros94 · 2024-10-15T09:15:57Z

Can we have an even darker theme?

@MrHBS you can go as dark as:

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

.dark {
  --ui-bg: var(--color-black);
}

/*
Or if you want it also for the light theme
:root {
  --ui-bg: var(--color-black);
}
*/
</style>

masterdaweb · 2024-10-20T05:04:06Z

Hi all.

Not sure if this has already been answered. Is Nuxt UI 3 going to be backwards compatible while we can upgrade to the new v3 components?

HigherOrderLogic · 2024-10-20T06:47:58Z

Is Nuxt UI 3 going to be backwards compatible while we can upgrade to the new v3 components?

No.

orenmizr · 2024-10-20T15:26:10Z

it makes sense. the move from headless to radix is a good move. i hope that project will continue to create powerful and accessible primitives. ui 3 should be a lot better as a whole. incredible work 🙏

MickL · 2024-10-20T16:21:08Z

Btw guys Radix Vue v2 is coming and they are planning a rebranding. It will be called Reka UI. I think Nuxt UI v3 should wait for this update too?

Alpha version has already been released: https://reka-ui.com

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

benjamincanac · 2024-10-20T16:23:01Z

@MickL It is already planned: #2259. I'm just waiting for the alpha.2 to migrate.

orenmizr · 2024-10-21T10:07:33Z

Btw guys Radix Vue v2 is coming and they are planning a rebranding. It will be called Reka UI. I think Nuxt UI v3 should wait for this update too?

Alpha version has already been released: https://reka-ui.com

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

why change something that is working ? part of radix-vue's success was because its direct relation to radix. not sure about this departure. in my language reka means background so "Background UI" : )

HigherOrderLogic · 2024-10-21T10:37:56Z

why change something that is working ?

Well, here's the quote straight from the announcement.

However, as feature requests grew, Radix Vue began to add more components and features, and modify certain behaviors specifically tailored for Vue. As a result, Radix Vue started to feel like a unique component library rather than just the ported version of Radix UI. Therefore, we are planning to give it a different identity.

MickL · 2024-10-21T10:42:20Z

I think the decision is good but I dont like the name Reka UI aswell

sandros94 · 2024-10-21T13:08:28Z

I think the decision is good but I dont like the name Reka UI aswell

Well, we all gonna install Nuxt UI, don't we? 😜
Especially once Vue's native support gets merged #2416

sharmapukar217 · 2024-10-22T05:38:12Z

I have an issue, i want to add select inside dropdown, say for example:
Theme changer/language changer inside profile menu dropdown menu, is it possible. If someone had already done this, please share. 🥲

sandros94 · 2024-10-23T16:45:30Z

If someone had already done this, please share.

@sharmapukar217 you can take a look at the playground to have an example

ui/playground/app/pages/components/dropdown-menu.vue

Lines 15 to 21 in 7687ac1

    
               label: 'Profile', 
        
               icon: 'i-heroicons-user', 
        
               slot: 'custom' as const, 
        
               onSelect(e: Event) { 
        
                 e.preventDefault() 
        
                 console.log('Profile clicked') 
        
               }

For example inside your Dropdown you create a theme/language that have a number of children and you can map their onSelect to your desired function

sharmapukar217 · 2024-10-26T16:09:33Z

If someone had already done this, please share.

@sharmapukar217 you can take a look at the playground to have an example

ui/playground/app/pages/components/dropdown-menu.vue

Lines 15 to 21 in 7687ac1
 label: 'Profile', 
 icon: 'i-heroicons-user', 
 slot: 'custom' as const, 
 onSelect(e: Event) { 
   e.preventDefault() 
   console.log('Profile clicked') 
 } 
For example inside your Dropdown you create a theme/language that have a number of children and you can map their onSelect to your desired function

thank you for your suggestion but i'm afraid to say it doesn't work. First of all, this seems not working with nested dropdown, and there's no option for dropdown radio element for now.
@benjamincanac won't it be better to also export the styled primitives along with , so that if required, one can do:

<UDropdownMenu>
 <UDropdownContent>
<UDropdownItem>Something</UDropdownItem>

<UDropdownSub>
<UDropdownSubTrigger>Nested</UDropdownSubTrigger>
<UDropdownSubContent>
...
</UDropdownSubContent>
</UDropdownSub>
</UDropdownContent>
</UDropdownMenu>

GalacticHypernova · 2024-11-05T21:20:53Z

I know this topic has slightly been discussed in the past, but I believe v3 users could also benefit from a built-in theme changer component (like the one used in docs). Although the code for it is present, it would still likely be better implemented officially than most of the recreation attempts. It could make it much more productive and convenient

benjamincanac · 2024-11-05T21:22:20Z

@GalacticHypernova The issue I see with this is it's not only a component, a plugin is required to make this work: https://github.com/nuxt/ui/blob/dev/docs/plugins/ui.ts

GalacticHypernova · 2024-11-05T22:01:32Z

The issue I see

Is there any downside to having this plugin? Why is it an issue?

Larsklopstra · 2024-11-08T14:18:03Z

Amazing work, I'm looking forward to this! 🤩

I've just tried v3.0.0-alpha.8 in a Inertia.js/Vue project and noticed one thing. It seems to be coupled to vue-router. Is it possible to be/make it router agnostic? The reason I'm asking is that components extending/using ULinks in Inertia.js (https://github.com/inertiajs/inertia) break due to Nuxt UI relying on vue-router (which isn't used in Inertia.js projects).

Inertia.js routing explanation

At its core, Inertia is essentially a client-side routing library. It allows you to make page visits without forcing a full page reload. This is done using the component, a light-weight wrapper around a normal anchor link. When you click an Inertia link, Inertia intercepts the click and makes the visit via XHR instead. You can even make these visits programmatically in JavaScript using router.visit().

When Inertia makes an XHR visit, the server detects that it's an Inertia visit and, instead of returning a full HTML response, it returns a JSON response with the JavaScript page component name and data (props). Inertia then dynamically swaps out the previous page component with the new page component and updates the browser's history state.

https://inertiajs.com/how-it-works

Is this worth an issue? Thanks

benjamincanac · 2024-11-08T14:22:13Z

@Larsklopstra There is already this issue that relates: #2518. I'm not sure this can be done because we need to use the RouterLink component for Vue apps, client-side navigation will not work otherwise.

HigherOrderLogic · 2024-11-08T14:30:40Z

Amazing work, I'm looking forward to this! 🤩

I've just tried v3.0.0-alpha.8 in a Inertia.js/Vue project and noticed one thing. It seems to be coupled to vue-router. Is it possible to be/make it router agnostic? The reason I'm asking is that components extending/using ULinks in Inertia.js (inertiajs/inertia) break due to Nuxt UI relying on vue-router (which isn't used in Inertia.js projects).

Inertia.js routing explanation
Is this worth an issue? Thanks

Maybe you can try overwrite the ULink component with your own Inertia-compatible one?

mostafaznv · 2024-11-10T18:03:52Z

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.

menthol · 2024-11-11T08:53:51Z

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.

I think, it belongs to app.config.ts

shao-wang-me · 2024-11-11T11:53:17Z

Thanks for all the great work!
Will Nuxt UI v3 work with Nuxt 4 or it doesn't have much to do with Nuxt 4 and would just work? Thanks!

sandros94 · 2024-11-11T12:43:49Z

Thanks for all the great work! Will Nuxt UI v3 work with Nuxt 4 or it doesn't have much to do with Nuxt 4 and would just work? Thanks!

UI v3 docs are based on Nuxt 4, everything already works 😉

maximepvrt · 2024-11-11T14:21:18Z

ssstwitter.com_1731334605744.mp4

https://x.com/jh3yy/status/1855346126700118495

@benjamincanac Adding this effect to the navigation menu in Nuxt UI would be a ✨enhancement ! https://ui3.nuxt.dev/components/navigation-menu

MickL · 2024-11-11T14:51:52Z

I think nuxt-ui is highly tied to what Reka UI (formerly Radix Vue) offers or no? I dont see this animation over there:

https://reka-ui.com/docs/components/navigation-menu

BlackWhite2000 · 2024-11-11T17:31:29Z

ssstwitter.com_1731334605744.mp4
https://x.com/jh3yy/status/1855346126700118495

@benjamincanac Adding this effect to the navigation menu in Nuxt UI would be a ✨enhancement ! https://ui3.nuxt.dev/components/navigation-menu

Hi, how are you? Just a quick question—I'd like to ask if the zoom effect in your video was done using editing software?

sandros94 · 2024-11-11T17:57:13Z

ssstwitter.com_1731334605744.mp4
https://x.com/jh3yy/status/1855346126700118495

@benjamincanac Adding this effect to the navigation menu in Nuxt UI would be a ✨enhancement ! https://ui3.nuxt.dev/components/navigation-menu

Could we also appreciate the small spin of the top-right arrow 😍

maximepvrt · 2024-11-11T19:25:51Z

ssstwitter.com_1731334605744.mp4
https://x.com/jh3yy/status/1855346126700118495

@benjamincanac Adding this effect to the navigation menu in Nuxt UI would be a ✨enhancement ! https://ui3.nuxt.dev/components/navigation-menu

Hi, how are you? Just a quick question—I'd like to ask if the zoom effect in your video was done using editing software?

The video is from a tweet, the reference is provided in my message ;-)

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

ineshbose mentioned this issue Oct 27, 2024

feat(InputMenu/SelectMenu): add create-item prop #2472

Merged

8 tasks

mostafaznv mentioned this issue Nov 13, 2024

Add file upload component #1945

Open

v3 #1289

v3 #1289

Comments

benjamincanac commented Jan 29, 2024 • edited Loading

Overview

Documentation

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

sandros94 commented Oct 15, 2024

masterdaweb commented Oct 20, 2024

HigherOrderLogic commented Oct 20, 2024

orenmizr commented Oct 20, 2024

MickL commented Oct 20, 2024 • edited Loading

benjamincanac commented Oct 20, 2024

orenmizr commented Oct 21, 2024

HigherOrderLogic commented Oct 21, 2024

MickL commented Oct 21, 2024

sandros94 commented Oct 21, 2024

sharmapukar217 commented Oct 22, 2024

sandros94 commented Oct 23, 2024 • edited Loading

sharmapukar217 commented Oct 26, 2024

GalacticHypernova commented Nov 5, 2024

benjamincanac commented Nov 5, 2024

GalacticHypernova commented Nov 5, 2024 • edited Loading

Larsklopstra commented Nov 8, 2024

benjamincanac commented Nov 8, 2024

HigherOrderLogic commented Nov 8, 2024

mostafaznv commented Nov 10, 2024

menthol commented Nov 11, 2024

shao-wang-me commented Nov 11, 2024

sandros94 commented Nov 11, 2024

maximepvrt commented Nov 11, 2024

MickL commented Nov 11, 2024 • edited Loading

BlackWhite2000 commented Nov 11, 2024

sandros94 commented Nov 11, 2024

maximepvrt commented Nov 11, 2024

benjamincanac commented Jan 29, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

MickL commented Oct 20, 2024 •

edited

Loading

sandros94 commented Oct 23, 2024 •

edited

Loading

GalacticHypernova commented Nov 5, 2024 •

edited

Loading

MickL commented Nov 11, 2024 •

edited

Loading