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

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)

angelorc · 2025-01-30T23:37:57Z

Hello, is there any way to use UTable and make the full row clickable (as NuxtLink) and with an hover effect?

I solved the hover effect by adding this

<UTable
    :data="data"
    :columns="columns"
    :loading="status === 'pending'"
    class="flex-1"
    :ui="{
      tr: '[&:is(tbody>tr)]:hover:bg-[var(--ui-bg-muted)]'
    }"
  >
....
</UTable>

would be nice to understand how to make the full row as link

Thanks.
A.

frasza · 2025-01-31T08:53:37Z

Hello, is there any way to use UTable and make the full row clickable (as NuxtLink) and with an hover effect?

I solved the hover effect by adding this
<UTable
    :data="data"
    :columns="columns"
    :loading="status === 'pending'"
    class="flex-1"
    :ui="{
      tr: '[&:is(tbody>tr)]:hover:bg-[var(--ui-bg-muted)]'
    }"
  >
....
</UTable>
would be nice to understand how to make the full row as link

Thanks. A.

This would actually be really good also for possible prefetching.

patriciorivera · 2025-02-01T18:47:15Z

Do you have an estimated release date for Dashboard components for v3? Awesome work! Thanks!

MickL · 2025-02-01T19:12:48Z

Hello, is there any way to use UTable and make the full row clickable (as NuxtLink) and with an hover effect?

Clickable table rows came up a lot of times already and I would also REALLY appreciate this! This might be the right PR to upvote I guess:
#2822 ?

NoobSkywalker · 2025-02-03T15:20:52Z

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

@bocooper-dev @MuhammadM1998 try to install typescript to your dev dependencies.

stijns96 · 2025-02-06T08:53:24Z

Hi @benjamincanac,

Is there a rough timeline when we can expect a beta or v3 release? I can imagine that it's quite a lot of work, especially that TW 4 now has been released. It's not to push, but just to make an internal decision within my company if we would already move over to Nuxt Content.

One of the issues we now have for example is that Content changed the _path to path and that breaks the UContentSurround component.

V3 is already looking great, so keep up the good work! :)

MickL · 2025-02-06T10:11:25Z

To me it is working fine so far, definitely usable! On the other hand I see there are at least 123 open issues...

benjamincanac · 2025-02-06T10:47:02Z

@stijns96 I would use the v3-alpha.x, even though there are lots of issues it's working great already. I'm having a hard-time working on all those components and doing issue triage at the same time so the number keeps growing.

The reason why it's still in alpha is because reka-ui is still in alpha although it's pretty stable to me but also because I'm still working on finishing Nuxt UI Pro v3 (we're missing AuthForm and Dashboard components but PRs are opened already) and I'd like to release both at the same time so the version numbers match 😊

stijns96 · 2025-02-06T10:52:53Z

@stijns96 I would use the v3-alpha.x, even though there are lots of issues it's working great already. I'm having a hard-time working on all those components and doing issue triage at the same time so the number keeps growing.

The reason why it's still in alpha is because reka-ui is still in alpha although it's pretty stable to me but also because I'm still working on finishing Nuxt UI Pro v3 (we're missing AuthForm and Dashboard components but PRs are opened already) and I'd like to release both at the same time so the version numbers match 😊

Hi @benjamincanac,

Thanks for the update! I totally understand you want to release both and I will use alpha for now. I really like to help you guys out, but honestly I'm really busy at the moment...

I'll see what I can do in the near future!

BlackDahlia313 · 2025-02-10T01:36:52Z

To me it is working fine so far, definitely usable! On the other hand I see there are at least 123 open issues...

Agreed. I am using it on a pretty complex app and it's working better from what we transitioned from that has been stable for a while.

madsh93 · 2025-02-13T19:09:23Z

I see comments are being marked as off topics including my own comment. I can't find guidelines as to what can be discussed in here.

Would you mind providing guidelines?

benjamincanac · 2025-02-13T20:12:17Z

@madsh93 As mentioned previously, this issue was mostly made for news not for specific bug reports. Please open a new issue with a reproduction.

icarusion · 2025-02-17T06:11:33Z

DropdownMenu cannot be nested with Tooltip components?

Code here:

<template>
  <UTooltip text="Copy">
    <UButton color="neutral" variant="ghost" size="xs" icon="i-lucide-copy" />
  </UTooltip>
  <UTooltip text="Delete">
    <UButton color="neutral" variant="ghost" size="xs" icon="i-lucide-trash-2" />
  </UTooltip>
  <UDropdownMenu size="sm" :items="exportItems">
    <UTooltip text="Export as...">
      <UButton color="neutral" variant="ghost" size="xs" icon="i-lucide-file-down" />
    </UTooltip>
  </UDropdownMenu>
</template>
<script setup>
  const exportItems = [
  [
    {
      label: 'Export as...',
      type: 'label'
    },
  ],
  [
    {
      label: 'Markdown',
      onSelect () {
        
      }
    },
    {
      label: 'Plain Text',
      onSelect () {
        
      }
    },
  ]
]
</script>

in this case, UDropdownMenu can not work, if remove UTooltip element, it works.

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

spirillen mentioned this issue Feb 7, 2025

mature-x.com mypdns/matrix#78023

Open

This comment has been minimized.

Sign in to view

Johnwjl mentioned this issue Feb 12, 2025

Support for Multi-Row and Colspan Headers in UTable Component #3296

Open

atinux mentioned this issue Feb 13, 2025

docs: add marketing pages #3308

Merged

1 task

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

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

angelorc commented Jan 30, 2025

frasza commented Jan 31, 2025

patriciorivera commented Feb 1, 2025

MickL commented Feb 1, 2025

NoobSkywalker commented Feb 3, 2025

stijns96 commented Feb 6, 2025

MickL commented Feb 6, 2025

benjamincanac commented Feb 6, 2025

stijns96 commented Feb 6, 2025

BlackDahlia313 commented Feb 10, 2025

This comment has been minimized.

This comment has been minimized.

madsh93 commented Feb 13, 2025

benjamincanac commented Feb 13, 2025

icarusion commented Feb 17, 2025

benjamincanac commented Jan 29, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

messenjer commented Jan 26, 2025 •

edited

Loading

bocooper-dev commented Jan 26, 2025 •

edited

Loading