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

zAlweNy26 · 2024-10-02T18:35:18Z

@sharmapukar217 check this issue unovue/radix-vue#1320

divine · 2024-10-03T00:52:09Z

Hello,

Here is another suggestion for the Table component that I'm currently trying to use.

Let's get an example Table from the documentation page:

<UTable v-model="selected" :rows="people" @select="select" />

There is an @select function that emits selection on the Table row when clicked.

function select (row) {
  const index = selected.value.findIndex((item) => item.id === row.id)
  if (index === -1) {
    selected.value.push(row)
  } else {
    selected.value.splice(index, 1)
  }
}

However, this doesn't provide any event information on which column it was clicked. For example, I'd like to allow clicking on the Checkbox and running another function when clicking on Email, for example. Basically, what I'm looking for is to allow Checkbox clicking and running a custom function when clicked on another column.

Basically, @select should provide an event in which column it was clicked. This will make the Table more customizable for different needs.

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

Line 76 in 5ed5c57

  <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.capture.stop="() => onSelect(row)" /> 

Maybe something like this:

<UTable v-model="selected" :rows="people" @select="select(row, column)" />

or another option might just to allow running checkbox solely while running another event when clicking on columns.

Thanks!

rigtigeEmil · 2024-10-03T17:11:50Z

Is there a rought timeline of when the Table will be available? Seems to be the biggest blocker before we'll tackle the upgrade.
Looks super nice from the docs!

benjamincanac · 2024-10-03T18:22:28Z

@rigtigeEmil I'm working on the Carousel (#2288) and on color management with CSS variables (#2298) at the moment. The Table component will come next!

onurusluca · 2024-10-05T15:30:33Z

edit2: looks like I need to do pnpm add -D typescript@latest as per the new docs, which I missed lol. I am going to keep this here in case other have these problems.

edit: looks like this is because I have @nuxtjs/tailwindcss installed. Removed it and it is gone. But now a warning:

[plugin:vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.
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.

C:/Coding Stuff/nuxt-v3-test/.pnpm/@[email protected][email protected][email protected][email protected][email protected][email protected]_@_i2mgdftgdwi4kq7ur7kducjgum/node_modules/@nuxt/ui/dist/runtime/components/Button.vue
56 |  
57 |  const loadingAutoState = ref(false)
58 |  const formLoading = inject<Ref<boolean> | undefined>(formLoadingInjectionKey, undefined)
   |                                                         ^^^^^^^^^^^^^^^^^^^^^^
59 |  
60 |  async function onClickWrapper(event: MouseEvent) {

Thanks for the work on v3. Looks great. Looking forward to table and carousel.
I couldn't find a place to share some feedback, sorry if this is the wrong thread.

Testing out v3, did the arrangements like docs says but got this on pnpm dev:

 ERROR  Cannot start nuxt:  Package subpath './nesting' is not defined by "exports" in C:\Coding Stuff\nuxt-v3-test\node_modules\tailwindcss\package.json

Is this a Windows path problem?

Deleted node_modules, .nuxt, pnpm-lock. Redid pnpm install and dev. Same.

Sys info:

- Operating System: Windows_NT
- Node Version:     v20.15.0
- Nuxt Version:     3.13.2
- CLI Version:      3.14.0
- Nitro Version:    2.9.7
- Package Manager:  [email protected]
- Builder:          -
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -

Using compatibilityVersion: 4, which v2 didn't have a problem with.

benjamincanac · 2024-10-05T19:57:57Z

@onurusluca Are you using https://github.com/nuxt/ui/releases/tag/v3.0.0-alpha.5?

onurusluca · 2024-10-06T03:31:00Z

@onurusluca Are you using https://github.com/nuxt/ui/releases/tag/v3.0.0-alpha.5?

Ah sorry yes, I am.

"@nuxt/ui": "3.0.0-alpha.5",

itpropro · 2024-10-06T11:38:15Z

@benjamincanac do you think it makes sense to already upgrade to reka-ui (radix-vue renamed itself with 1.0)?
They released the first alpha a few days ago and 1.9.6 will probably be the last radix-vue version.

benjamincanac · 2024-10-06T11:59:33Z

@onurusluca Please open a bug report using: https://github.com/nuxt/ui/issues/new?template=bug-v3.yml. This issue was mostly made for news.

benjamincanac · 2024-10-06T12:00:53Z

@itpropro It is planned already: #2259. I'll tackle this next week 😊

go4cas · 2024-10-07T06:38:36Z

Hi @benjamincanac! looking forward to v3! Have the Meter and MeterGroups components been removed from v3?

benjamincanac · 2024-10-07T09:13:47Z

@go4cas They have not been implemented yet as I didn't think it was a priority. I don't think I'll re-make a Meter as it's mostly the same as Progress. However, we could re-implement a MeterGroup component, here's the issue: #2322.

onurusluca · 2024-10-07T15:06:45Z

Is there a stackblitz or codepen template we can test the v3 with? So that we can use it on reproductions etc.

Tried to create one but getting some errors:
https://stackblitz.com/edit/nuxt-ui-v3-test?file=nuxt.config.ts

Looks like a stackblitz and tailwind v4 problem:
stackblitz/core#1855

sandros94 · 2024-10-07T16:28:46Z

Hi @onurusluca, yes currently Tailwind CSS cannot be used on stackblitz, as you have seen they are working on a compatible layer. We just need to wait for that.

About the postcss-import, you could have an hanging tailwind v3 in your node_modules/lockfile. The quickest test you could do is to delete both node_modules and lockfile and reinstall all deps.

But please, this one free from issues and other discussion. If you need further assistance feel free to tag me in a new issue or on the Nuxt's Discord server

MickL · 2024-10-07T16:49:20Z

I would also appreciate if this issue is now for general v3 discussions/status and not for issues and individual problems.

caiotarifa · 2024-10-07T22:46:33Z

Well, I saw that Radix Vue released a v1.0.0-alpha.1 with a new name (Reka UI). It's interesting since the library is currently at v1.9.7. This update has already been discussed in #409.

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

So, the alpha version is official. Are there any plans to start testing this new version in Nuxt UI v3?

HigherOrderLogic · 2024-10-07T23:39:23Z

So, the alpha version is official. Are there any plans to start testing this new version in Nuxt UI v3?

See #2259. :)

Type-32 · 2024-10-08T01:51:52Z

will other components (i.e. Tree, Editable, etc.) from radix-vue/reka-ui be wrapped into NuxtUI components?

benjamincanac · 2024-10-08T08:37:30Z

@Type-32 The plan is to wrap most of them yes, see https://github.com/nuxt/ui/issues?q=is:issue%20state:open%20label:feature%20label:v3. I'm thinking of building an actual DatePicker as well!

The first goal is to implement the same components as Nuxt UI v2, once it's done we'll start implementing new ones 😊

AbdallahAlhaddad · 2024-10-10T06:48:58Z

Hi @benjamincanac

I’d like to suggest adding the ability to configure all props dynamically, rather than being limited to defining only defaultVariants. You can check out a similar implementation in this library.

rigtigeEmil · 2024-10-10T15:22:17Z

Apologies if it's been answered already, but what's the plan for Nuxt UI Pro?

sandros94 · 2024-10-10T16:41:53Z

@rigtigeEmil it has been answered multiple times above, some of them being:

Install the Nuxt UI Pro v2 alpha package:
npm add @nuxt/ui-pro@next
You don't need to install @nuxt/ui@next as it's already a dependency of @nuxt/ui-pro
Register the Nuxt UI Pro module in your nuxt.config.ts:
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
Nuxt UI Pro is now a module that will install @nuxt/ui for you.
Import Tailwind and Nuxt UI Pro in your CSS:
<style>
@import "tailwindcss";
@import "@nuxt/ui-pro";
</style>
The @nuxt/ui-pro CSS already imports @nuxt/ui for you

#1289 (comment)

and:

Nuxt UI Pro v2 will be a free update as the end result will mostly look the same but using the latest Nuxt UI v3 😊

#1289 (comment)

luyentm · 2024-10-11T06:43:23Z

Hi @benjamincanac

I’d like to suggest adding the ability to configure all props dynamically, rather than being limited to defining only defaultVariants. You can check out a similar implementation in this library.

Thank you for awesome work. However please add ToogleGroup component: https://www.radix-vue.com/components/toggle-group

onurusluca · 2024-10-12T04:41:52Z

@benjamincanac
Are there any plans to add charts? With something like Unovis.

jgourmelen · 2024-10-13T12:28:39Z

Do you know why I have this error with " npx vue-tsc --noEmit" :

node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Toast.vue:5:24 - error TS2307: Cannot find module '#build/app.config' or its corresponding type declarations.

5 import _appConfig from '#build/app.config'
                         ~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Toaster.vue:5:24 - error TS2307: Cannot find module '#build/app.config' or its corresponding type declarations.

5 import _appConfig from '#build/app.config'
                         ~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Tooltip.vue:5:24 - error TS2307: Cannot find module '#build/app.config' or its corresponding type declarations.

5 import _appConfig from '#build/app.config'
                         ~~~~~~~~~~~~~~~~~~~

On all my modules:

Found 43 errors in 42 files.

Errors  Files
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Accordion.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Alert.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Avatar.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/AvatarGroup.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Badge.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Breadcrumb.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Button.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/ButtonGroup.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Card.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Carousel.vue:12
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Checkbox.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Chip.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Collapsible.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/CommandPalette.vue:8
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Container.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/ContextMenu.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Drawer.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/DropdownMenu.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Form.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/FormField.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Input.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/InputMenu.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Kbd.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Link.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Modal.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/NavigationMenu.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Pagination.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Popover.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Progress.vue:6
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/RadioGroup.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Select.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Separator.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Skeleton.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Slideover.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Slider.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Switch.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Tabs.vue:6
     2  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Textarea.vue:4
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Toast.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Toaster.vue:5
     1  node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]_rollu_oyfwje5o4lmx65ncsqmqzunreu/node_modules/@nuxt/ui/dist/runtime/components/Tooltip.vue:

MrHBS · 2024-10-13T13:00:01Z

Can we have an even darker theme?

ddahan · 2024-10-13T16:48:02Z

I'm thinking of building an actual DatePicker as well!

@benjamincanac This is a great idea to me for many reasons. There are issues with current v-calendar version. Avoiding to rely on external dependency for such an important component should help with code robustness, styling consistency, and component performance.

orenmizr · 2024-10-15T04:46:08Z

question about the development process: nuxt ui pro depends on nuxt ui... if you are using nuxt ui v3... that means that they are radix based. while nuxt ui pro still looks to be on ^2. is the pro being worked on as well ? will they be released together ?

sandros94 · 2024-10-15T08:59:48Z

@orenmizr Nuxt UI-Pro also has an alpha release, as explained above #1289 (comment) (please do note that not all components have been rewritten, yet)

Install the Nuxt UI Pro v2 alpha package:
npm add @nuxt/ui-pro@next
You don't need to install @nuxt/ui@next as it's already a dependency of @nuxt/ui-pro
Register the Nuxt UI Pro module in your nuxt.config.ts:
export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})
Nuxt UI Pro is now a module that will install @nuxt/ui for you.
Import Tailwind and Nuxt UI Pro in your CSS:
<style>
@import "tailwindcss";
@import "@nuxt/ui-pro";
</style>
The @nuxt/ui-pro CSS already imports @nuxt/ui for you

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>

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

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

zAlweNy26 commented Oct 2, 2024

divine commented Oct 3, 2024

rigtigeEmil commented Oct 3, 2024

benjamincanac commented Oct 3, 2024

onurusluca commented Oct 5, 2024 • edited Loading

benjamincanac commented Oct 5, 2024

onurusluca commented Oct 6, 2024 • edited Loading

itpropro commented Oct 6, 2024

benjamincanac commented Oct 6, 2024

benjamincanac commented Oct 6, 2024

go4cas commented Oct 7, 2024

benjamincanac commented Oct 7, 2024 • edited Loading

onurusluca commented Oct 7, 2024 • edited Loading

sandros94 commented Oct 7, 2024 • edited Loading

MickL commented Oct 7, 2024

caiotarifa commented Oct 7, 2024

HigherOrderLogic commented Oct 7, 2024

Type-32 commented Oct 8, 2024

benjamincanac commented Oct 8, 2024

AbdallahAlhaddad commented Oct 10, 2024

rigtigeEmil commented Oct 10, 2024

sandros94 commented Oct 10, 2024

luyentm commented Oct 11, 2024

onurusluca commented Oct 12, 2024

jgourmelen commented Oct 13, 2024

MrHBS commented Oct 13, 2024

ddahan commented Oct 13, 2024

orenmizr commented Oct 15, 2024

sandros94 commented Oct 15, 2024 • edited Loading

sandros94 commented Oct 15, 2024

benjamincanac commented Jan 29, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

benjamincanac commented Mar 6, 2024 •

edited

Loading

onurusluca commented Oct 5, 2024 •

edited

Loading

onurusluca commented Oct 6, 2024 •

edited

Loading

benjamincanac commented Oct 7, 2024 •

edited

Loading

onurusluca commented Oct 7, 2024 •

edited

Loading

sandros94 commented Oct 7, 2024 •

edited

Loading

sandros94 commented Oct 15, 2024 •

edited

Loading