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

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

MickL · 2025-01-23T17:37:26Z

Tailwind v4 has been release yesterday :)
https://tailwindcss.com/blog/tailwindcss-v4

stefanocurnis · 2025-01-26T20:07:40Z

Is there a chance to make this library available for Laravel and Inertia too? The audience there is pretty big. At the moment no one can use it because of Link component tied to the vue-router dependency.

messenjer · 2025-01-26T20:31:36Z

Is there a chance to make this library available for Laravel and Inertia too? The audience there is pretty big. At the moment no one can use it because of Link component tied to the vue-router dependency.

May be something like this : https://github.com/gigerIT/vuetify-inertia-link#readme

Or like that: https://uvr.esm.is/data-loaders/nuxt

bocooper-dev · 2025-01-26T20:41:58Z

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

@gitamgadtaula your file path may be too long. I was having the same issue until I moved my project directory closer to the root of my C: drive.

TartanLeGrand · 2025-01-27T07:57:47Z

@benjamincanac Can you release the alpha 12 with the Tailwind v4 ? 😄

MuhammadM1998 · 2025-01-27T09:53:40Z

@bocooper-dev What OS are you using? I got the same error and this is blocking using a better way for #3177 😅 I'm on Windows and my path is short D:\Personal\ui

bocooper-dev · 2025-01-27T10:55:58Z

@bocooper-dev What OS are you using? I got the same error and this is blocking using a better way for #3177 😅 I'm on Windows and my path is short D:\Personal\ui

MuhammadM1998 I'm using windows as well. Originally my project was in my OneDrive folder. When I tried to reproduce the error here on codesandbox, everything worked flawlessly. So then I tried copying files into my OneDrive project and got a windows error message about some file paths in node_modules being too long. Once I re-cloned the project to my C: drive, I no longer had issues. If things still aren't working for you, you can also try increasing the Maximum Path Length Limitation in the Windows Registry.

MuhammadM1998 · 2025-01-27T13:46:36Z

@bocooper-dev Thanks for the insights 🙏 I'll try that and get back to you

sandros94 · 2025-01-27T15:04:13Z

@bocooper-dev @MuhammadM1998
This isn't the right place to discuss this, but I'm going to leave this info here:
If you are on Windows 11 (as I do) I strongly suggest you to work with their new Dev Drives. This fixes many issues related to HMR and path length.

Or, in alternative, use WSL.

But if you want to talk about this feel free to start a discussion on Nuxt's Discord server and tag me in, I'll try to help as I can.

BlackDahlia313 · 2025-01-29T16:37:01Z

Could we get an example of using a UCard in a radio group? Seems like we can't in this new version?

HugoRCD · 2025-01-29T16:41:22Z

@BlackDahlia313 A PR is underway to add the variant! #3178

BlackDahlia313 · 2025-01-29T18:11:15Z

@BlackDahlia313 A PR is underway to add the variant! #3178

Haha well would you look at that! insert meme here

How awesome! Thank you! (I should have checked PRs first haha)

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

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

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

MickL commented Jan 23, 2025

stefanocurnis commented Jan 26, 2025 • edited Loading

messenjer commented Jan 26, 2025 • edited Loading

bocooper-dev commented Jan 26, 2025 • edited Loading

TartanLeGrand commented Jan 27, 2025

MuhammadM1998 commented Jan 27, 2025

bocooper-dev commented Jan 27, 2025

MuhammadM1998 commented Jan 27, 2025

sandros94 commented Jan 27, 2025

BlackDahlia313 commented Jan 29, 2025

HugoRCD commented Jan 29, 2025

BlackDahlia313 commented Jan 29, 2025

benjamincanac commented Jan 29, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

HugoRCD commented Jan 20, 2025 •

edited

Loading

MickL commented Jan 20, 2025 •

edited

Loading

stefanocurnis commented Jan 26, 2025 •

edited

Loading

messenjer commented Jan 26, 2025 •

edited

Loading

bocooper-dev commented Jan 26, 2025 •

edited

Loading