v3 #1289
Comments
|
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 |
|
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 |
|
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? |
|
@jd-solanki You can share them here! |
|
Since it is supposed to be a refactoring to all components, could we give the possibility of compatibility with unocss? |
|
@sawa-ko It will be made with Tailwind v4. To what end would you make it compatible with Uno? |
|
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 I'll post regular updates on this issue. |
|
Please tell me how long it will take for this upgrade to be available. |
|
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. |
|
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: |
|
@robin-dongbin It's already in the making. There are already 13 components done, 36 more to go 😅 |
|
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 |
|
This is actually already what we're doing with the App Config. You can customize the classes for every part of every component. |
|
Thanks for the work! Just one question :
|
|
No we keep the For example the 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 |
|
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 🙏🏻 |
|
Was UI 3 meant to look different. Really like the default font, text spacing and padding of UI 2 bit on all templates looks quite different? |
|
Personally I was hoping for a visual improvement over v2. E.g. the examples in Reka UI look way better imo and I guess they delivered? I am super happy with the changes. |
|
Hey guys, we're close to releasing an |
|
@benjamincanac would you maybe mind releasing the alpha.14 today to fix the whole tailwindcss bugs and then a beta.1 with the missing bugs next week? |
|
You can install latest commit as shown here: |
|
Hello, just tried to build with the beta.1 I'll get memory issues while prerender I also tried with |
|
@benjamincanac now works, build and dev works fine. I just lost the style... Before After |
|
Yes sorry I forgot to mention that in the release note, it's updated: https://github.com/nuxt/ui/releases/tag/v3.0.0-beta.1 You now have to do: @import "tailwindcss" theme(static);You can read more in #3374 |
|
A bit better, but I loose my primary color. This is the main.css app.config |
|
Yes you also need |
|
awesome going to deploy :D |
We are already using it in production now, and everything seems to be working fine 🥳. The only thing is that you are not using |
If I may speak here - I've discussed with Benjamin, and adding the next version of Lines 77 to 82 in 9f241de There's more to it, like auto-adding CSS (i.e., |
|
I have tried beta.2, but I still have the same issue of tailwind not applying at all 😅 I did add to main.css : |
|
@QuentinFarizon This should be fixed already, you have to make sure to have |
|
I do have tailwindcss 4.0.9 🤔 |
|
@benjamincanac My Nuxt UI project suddenly stopped building overnight, failing with this log entry: Pinning ohash to 1.1.5 –as suggested in this comment– fixed it for me. According to @danielroe this is likely not a Nuxt, but rather a Nuxt UI issue so I thought I'd let you know 😃 |
|
@marckrenn It's always best to open a new issue for reporting bugs.. Yes we haven't updated |
I see, thanks for letting me know. I refrained to open a new issue as I couldn't yet verify if Nuxt UI truly is the culprit here. Just wanted to give you and others a heads up if they bump into the same problem.
Not proactively, only as dependencies of the following packages: npm why ohash |
|
You can keep the resolution I guess until the next release, just merged the PR to update |
|
@benjamincanac For example, in <script lang="ts" setup></script>
<template>
<nav class="py-12">
<UContainer>
<div class="flex justify-between items-center">
<!-- LOGO -->
<h1>LOGO</h1>
<!-- NAV -->
<ul class="flex gap-4">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</div>
</UContainer>
</nav>
</template>
<style scoped>
ul {
@apply bg-amber-400;
}
</style>I receive the following error: and the css file: @import "tailwindcss" theme(static);
@import "@nuxt/ui";
@theme static {
--color-primary: #15405A;
--color-secondary: #55BFCF;
}
:root {
--ui-primary: var(--color-primary);
--ui-secondary: var(--color-secondary);
} |
Try to use @reference "../../assets/css/main.css"; Reference to your Main CSS file where your songs and tailwincss import |
|
@FADL285 |
@clopezpro It works, but why is this needed?! Why doesn't it work directly like v2? |
|
CSS Layer Prioritization Issue in Nuxt UI v3(beta) with Tailwind CSS v4Describe the BugIn Nuxt UI v3 (beta) with Tailwind CSS v4, the CSS layer prioritization is incorrect. Specifically, the utilities inside the Expected BehaviorThe correct layer order should be:
However, the current order sometimes places Screenshots✅ Correct Order (Tailwind 4 - Expected Behavior) ❌ Incorrect Order (Current Behavior in Nuxt UI v3 + Tailwind 4) Reproduction Steps
Environment
Additional ContextThis issue significantly affects component styling, as utility classes within components may be overridden or not applied correctly. |
|
I think you should open a dedicated issue for that |
and others
The development is ongoing on the default branch of this repository: https://github.com/nuxt/ui.
A lot has changed since
@nuxt/uiwas 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)
reka-ui@alphaon@nuxt/ui&@nuxt/ui-profeat(module)!: migrate toreka-ui#2448@nuxt/ui-procomponents@nuxt/ui-procomponents@nuxt/uilikeCalendarfeat(Calendar): implement component #2618InputDate[InputDate] Implement component #2524Treefeat(Tree): new component #3180Stepperfeat(Stepper): new component #2733@nuxt/ui-proand@nuxt/contentv3 nuxt-ui-pro/saas#86@nuxt/ui-prov3 nuxt-ui-pro/dashboard#86@nuxt/ui&@nuxt/ui-proofficially oncetailwindcssandreka-uiare released@nuxt/ui&@nuxt/ui-procomponentsBreaking Changes
The biggest change is the switch to
tailwind-variants, this will cause lots of breaking changes if you've used theuiprop orapp.config.tsto override the config. I apologize in advance for this but I strongly believe this will be beneficial and will bring consistency across all components.The config will now have a
slotsamongst other keys that will specifically target dom nodes. Theuiprop will only allow you to target those slots.These changes alongside the refactor of all components will also improve the types, the
app.config.tsanduiprops are now perfectly typed, as well as all componentsprops,slots,emitsandexpose.Components
The text was updated successfully, but these errors were encountered: