v3 #1289

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

The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.

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

MickL · 2024-12-18T13:21:03Z

Thats how I did it. But you also need to keep track of if the reset button should be shown. For example one would say v-if="value" but this doesnt work if the value is 0 for example.

Imo it would make sense for this components to have a reset function built into Nuxt UI. BUT maybe there would be too many different requirements: One might want to be able to deselect a value in the select menu, this currently works only with multiple. Some might want to have an X integrated in the dropdown. Some others may want a delete icon next to the dropdown or a reset link button under it.

benjamincanac · 2024-12-18T13:28:28Z

@MickL That is exactly the reason why we've never implemented it, there are so many different possibilities to achieve this that it's easier to do it yourself honestly.

You can add a clear button using the #trailing slot, something like https://ui3.nuxt.dev/components/input#with-clear-button
You can use a ButtonGroup as @sandros94 mentioned
You can add an item inside the items with onSelect: (e) => e.preventDefault() and handle the logic there

MickL · 2024-12-18T13:34:36Z

Oh wow this 1. is a nice solution. Maybe this example could be added to InputMenu and SelectMenu as well! Also maybe the other two points could be at least mentioned in the docs (may dont need a code example).

What could be done tho for SelectMenu is the possibility to check an item off again? It works with multiple but not for single values.

benjamincanac · 2024-12-18T13:41:20Z

I'll add the examples! This would be an issue for Reka UI's Combobox component.

MickL · 2024-12-29T12:29:24Z

Shouldnt be Drawer and Slideover the same component? As far as I see the only difference is that a Drawer has an optional handle. Slideover is missing the "swipe to close" feature, but this I would definitely add to it as it is a common user behavior using mobile devices.

Personally I would remove Slideover, rename Drawer to Slideover and hide the handle by default.

mrwwalmsley · 2024-12-30T04:18:03Z

Nuxt UI Pro v3
You mentioned above that all the Nuxt UI Pro v3 components are implemented except for dashboard. When will these be made available as an alpha release? I'd love to start trying them out even if the documentation is not yet available.
Nuxt UI Pro documentation feedback

One thing I found a little confusing in the Nuxt UI Pro v2 documentation was trying to work out the difference between components with similar names: e.g. LandingCard vs PageCard or LandingGrid vs PageGrid. I had to look at the config code, but it would be good if the opening description had a little more detail to explain what that component did.

Nuxt UI Pro v3 Footer component issue

When you shrink the screen down to mobile mode, the default slot is left aligned instead of centre aligned like the left and right slots.

sandros94 · 2024-12-30T11:25:41Z

Shouldnt be Drawer and Slideover the same component? As far as I see the only difference is that a Drawer has an optional handle. Slideover is missing the "swipe to close" feature, but this I would definitely add to it as it is a common user behavior using mobile devices.

Personally I would remove Slideover, rename Drawer to Slideover and hide the handle by default.

Unfortunately, they are based on two completely separate tools, as you can read from the linked documentation.

Slideover comes from Reka UI's Dialog component, the same used for UModal. It is meant to be more stable and better supported since it is part of the main library.
Drawer on the other hand is still on its own project being only a Dialog replacement (in fact, it is built on top of it) for mobile and tablet use. More importantly it is still under a radix-vue implementation, last major before Reka UI. This means that there will be further breaking changes if that component will be kept active.

This would be more of an upstream discussion. But I personally use them both, depending on UI design and project's device target.

MickL · 2024-12-30T12:12:39Z

Doesnt it make sense to unify them when one is better supported? Personally I would love to use slideover but it doesnt have a swipe to close feature. Without the follow-pointer-movement, like Drawer has, it would be easily implemented by https://vueuse.org/core/useSwipe/

neok · 2025-01-01T19:24:01Z

When do you plan to release dashboard for v3?

Buringcarbon · 2025-01-04T02:22:56Z

When will the next version of v3.alpha10 come out, the current version does not seem to work in Windows and vue environments

sandros94 · 2025-01-04T04:07:27Z

When will the next version of v3.alpha10 come out, the current version does not seem to work in Windows and vue environments

Could you please open up a new issue? Feel free to tag me in

Buringcarbon · 2025-01-04T16:52:53Z

When will the next version of v3.alpha10 come out, the current version does not seem to work in Windows and vue environments

Could you please open up a new issue? Feel free to tag me in

there was already an issue #2831 (comment)

sandros94 · 2025-01-04T18:07:45Z

there was already an issue #2831 (comment)

Ah ok, not a new one.
Until a new release comes by the best thing you could do is to install it form the CI:
"@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@d4653e3", more info in the docs.

ineshbose · 2025-01-05T04:50:28Z

Could possibly consider adding a next tag to npm:@nuxt/ui-edge?

Buringcarbon · 2025-01-06T02:27:12Z

there was already an issue #2831 (comment)

Ah ok, not a new one. Until a new release comes by the best thing you could do is to install it form the CI: "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@d4653e3", more info in the docs.

I tried the method you suggested, and it indeed worked. Thank you very much.

iEnzO233 · 2025-01-12T09:08:44Z

@benjamincanac i have an issue with drawer and modal .
inside drawe i have used a modal . when i open my modal inside the drawer after modal close body get this style :
and i cant scroll or click on anything else

dannote · 2025-01-12T21:01:02Z

@benjamincanac the new stack and theming look great! Would you also be interested in migrating to a more modern-looking tailwindcss-motion?

Lionad-Morotar · 2025-01-18T15:48:10Z

Hello everyone, are there any docs about upgrade the nuxt/ui from v2 to v3 ？

madsh93 · 2025-01-20T06:55:57Z

@benjamincanac i have an issue with drawer and modal . inside drawe i have used a modal . when i open my modal inside the drawer after modal close body get this style : and i cant scroll or click on anything else

I also have this bug with the drawer where it scrolls when closing it, but only sometimes. It seems do to it everytime if I just used a selectmenu.

Archetipo95 · 2025-01-20T11:02:27Z

Button component is missing a cursor pointer in v3
I noticed it just by looking at the docs, maybe other accessibility features are missing?

MickL · 2025-01-20T11:13:06Z

I think they are ALL missing a pointer cursor. Not sure why, but it seems to be a feature not a bug.

First thing I did was adding pointers to all components I use in app.config

HugoRCD · 2025-01-20T11:14:09Z

@Archetipo95 @MickL Watch this issue for more explanation on why there's no cursor-pointer on the buttons! #2332

MickL · 2025-01-20T11:21:55Z

Maybe cursor: pointer could be added by default but opt-out with a config variable?

I guess most, if not all, of the developers will want to have a pointer for buttons, tabs, etc

divine · 2025-01-20T11:26:49Z

Maybe cursor: pointer could be added by default but opt-out with a config variable?

I guess most, if not all, of the developers will want to have a pointer for buttons, tabs, etc

This is a tailwind v4 change not something nuxt ui did in advance. Copy-pasting a CSS snippet is a way to go for now.

See @ tailwindlabs/tailwindcss#8961

madsh93 · 2025-01-20T14:09:40Z

Maybe cursor: pointer could be added by default but opt-out with a config variable?

I guess most, if not all, of the developers will want to have a pointer for buttons, tabs, etc

Just add this to your app.config.ts
ui: {
button: {
slots: {
base: 'cursor-pointer',
},
},
},

MickL · 2025-01-20T14:17:02Z

Yes I know but maybe this can be done by default by Nuxt UI BUT be opted-out in nuxt config?

Nuxt UI is all about convenience. It comes with Nuxt Icons and Nuxt Fonts, they dont need to be installed separately. Having no pointers will be something most, if not all, users will need to set manually. Therefore I would suggest to make this configurable and activated by default.

gitamgadtaula · 2025-01-20T14:22:25Z

Help I am getting this error

ERROR Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type. 8:06:20 PM
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/Users/gitamgadtaula/Desktop/work/freelance/mixtiles/node_modules/@nuxt/ui/dist/runtime/components/App.vue
28 | import UToaster from './Toaster.vue'
29 | import UModalProvider from './ModalProvider.vue'
30 | import USlideoverProvider from './SlideoverProvider.vue'
| ^^^^
31 |
| ^
32 | const props = defineProps()
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
33 | defineSlots()
| ^^^^^^^^^
Plugin: vite:vue
File: /Users/gitamgadtaula/Desktop/work/freelance/mixtiles/node_modules/@nuxt/ui/dist/runtime/components/App.vue

sandros94 · 2025-01-20T15:11:36Z

Yes I know but maybe this can be done by default by Nuxt UI BUT be opted-out in nuxt config?

Nuxt UI is all about convenience. It comes with Nuxt Icons and Nuxt Fonts, they dont need to be installed separately. Having no pointers will be something most, if not all, users will need to set manually. Therefore I would suggest to make this configurable and activated by default.

as pointed out in the upstream PR the CSS spec defines:

pointer
The cursor is a pointer that indicates a link.

I invite you to have a read of the various sources shared in that PR to have a clear understanding why this is the standard. Also, as @madsh93 already replied, it is as simple as adding the following to your app.config.ts:

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'cursor-pointer',
      },
    },
  },
})

sandros94 · 2025-01-20T15:16:20Z

Help I am getting this error

ERROR Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type. 8:06:20 PM If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/Users/gitamgadtaula/Desktop/work/freelance/mixtiles/node_modules/@nuxt/ui/dist/runtime/components/App.vue 28 | import UToaster from './Toaster.vue' 29 | import UModalProvider from './ModalProvider.vue' 30 | import USlideoverProvider from './SlideoverProvider.vue' | ^^^^ 31 | | ^ 32 | const props = defineProps() | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 33 | defineSlots() | ^^^^^^^^^ Plugin: vite:vue File: /Users/gitamgadtaula/Desktop/work/freelance/mixtiles/node_modules/@nuxt/ui/dist/runtime/components/App.vue

@gitamgadtaula please create a new issue with a reproduction link, as I need to see the context of UApp to understand this error. Feel free to tag me in once you open it

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

Closed

benjamincanac mentioned this issue Mar 13, 2024

Adaptation for vue? #1514

Closed

sandros94 mentioned this issue Dec 30, 2024

docs(Footer): UNavigation not centered on mobile #3000

Closed

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

MickL commented Dec 18, 2024

benjamincanac commented Dec 18, 2024

MickL commented Dec 18, 2024

benjamincanac commented Dec 18, 2024

MickL commented Dec 29, 2024 • edited Loading

mrwwalmsley commented Dec 30, 2024 • edited Loading

sandros94 commented Dec 30, 2024

MickL commented Dec 30, 2024

neok commented Jan 1, 2025

Buringcarbon commented Jan 4, 2025

sandros94 commented Jan 4, 2025

Buringcarbon commented Jan 4, 2025

sandros94 commented Jan 4, 2025

ineshbose commented Jan 5, 2025

Buringcarbon commented Jan 6, 2025

iEnzO233 commented Jan 12, 2025

dannote commented Jan 12, 2025

Lionad-Morotar commented Jan 18, 2025

madsh93 commented Jan 20, 2025

Archetipo95 commented Jan 20, 2025

MickL commented Jan 20, 2025

HugoRCD commented Jan 20, 2025 • edited Loading

MickL commented Jan 20, 2025 • edited Loading

divine commented Jan 20, 2025

madsh93 commented Jan 20, 2025

MickL commented Jan 20, 2025

gitamgadtaula commented Jan 20, 2025

sandros94 commented Jan 20, 2025

sandros94 commented Jan 20, 2025

benjamincanac commented Jan 29, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

MickL commented Dec 29, 2024 •

edited

Loading

mrwwalmsley commented Dec 30, 2024 •

edited

Loading

HugoRCD commented Jan 20, 2025 •

edited

Loading

MickL commented Jan 20, 2025 •

edited

Loading