mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 12:39:35 +01:00
Compare commits
13 Commits
feat/init-
...
refactor/t
| Author | SHA1 | Date | |
|---|---|---|---|
|
f14314387a | ||
|
|
8a20b7118d | ||
|
|
08da06a78c | ||
|
|
20fc6bfaad | ||
|
c1427a3264 | ||
|
|
2afce33038 | ||
|
|
8e82780df0 | ||
|
|
f81687724e | ||
|
6519a74de4 | ||
|
|
dbf19913a2 | ||
|
|
da05c37ffe | ||
|
|
faae76e796 | ||
|
|
6ea33aba68 |
@@ -34,7 +34,7 @@ const meta = await fetchComponentMeta(name as any)
|
||||
</ProseCode>
|
||||
</ProseTd>
|
||||
<ProseTd>
|
||||
<HighlightInlineType v-if="slot.type" :type="slot.type" />
|
||||
<HighlightInlineType v-if="slot.type" :type="slot.type.replace(/ui:\s*\{[^}]*\}/g, 'ui: {}')" />
|
||||
|
||||
<MDC v-if="slot.description" :value="slot.description" class="text-toned mt-1" :cache-key="`${kebabCase(route.path)}-${slot.name}-description`" />
|
||||
</ProseTd>
|
||||
|
||||
@@ -24,3 +24,10 @@ const password = ref('')
|
||||
</template>
|
||||
</UInput>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Hide the password reveal button in Edge */
|
||||
::-ms-reveal {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -107,10 +107,6 @@ export function useLinks() {
|
||||
to: 'https://github.com/Justineo/tempad-dev-plugin-nuxt-ui',
|
||||
target: '_blank'
|
||||
}]
|
||||
}, {
|
||||
label: 'Blog',
|
||||
icon: 'i-lucide-file-text',
|
||||
to: '/blog'
|
||||
}, {
|
||||
label: 'Releases',
|
||||
icon: 'i-lucide-rocket',
|
||||
|
||||
@@ -57,10 +57,6 @@ export function useSearchLinks() {
|
||||
description: 'Meet the team behind Nuxt UI.',
|
||||
icon: 'i-lucide-users',
|
||||
to: '/team'
|
||||
}, {
|
||||
label: 'Blog',
|
||||
icon: 'i-lucide-file-text',
|
||||
to: '/blog'
|
||||
}, {
|
||||
label: 'Releases',
|
||||
icon: 'i-lucide-rocket',
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
seo:
|
||||
title: Nuxt UI Blog
|
||||
description: Read the latest news, tutorials, and updates about Nuxt UI.
|
||||
title: Nuxt [UI]{.text-primary} Blog
|
||||
navigation.title: Blog
|
||||
description: Read the latest news, tutorials, and updates about Nuxt UI.
|
||||
navigation.icon: i-lucide-newspaper
|
||||
@@ -1,183 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { kebabCase } from 'scule'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const [{ data: page }, { data: surround }] = await Promise.all([
|
||||
useAsyncData(kebabCase(route.path), () => queryCollection('blog').path(route.path).first()),
|
||||
useAsyncData(`${kebabCase(route.path)}-surround`, () => {
|
||||
return queryCollectionItemSurroundings('blog', route.path, {
|
||||
fields: ['description']
|
||||
}).order('date', 'DESC')
|
||||
})
|
||||
])
|
||||
|
||||
if (!page.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
|
||||
}
|
||||
|
||||
const title = page.value.seo?.title || page.value.title
|
||||
const description = page.value.seo?.description || page.value.description
|
||||
|
||||
useSeoMeta({
|
||||
title,
|
||||
description,
|
||||
ogDescription: description,
|
||||
ogTitle: title
|
||||
})
|
||||
|
||||
if (page.value.image) {
|
||||
defineOgImage({ url: page.value.image })
|
||||
} else {
|
||||
defineOgImageComponent('Docs', {
|
||||
headline: 'Blog',
|
||||
title,
|
||||
description
|
||||
})
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
}).toUpperCase()
|
||||
}
|
||||
|
||||
const getCategoryVariant = (category: string) => {
|
||||
switch (category?.toLowerCase()) {
|
||||
case 'release': return 'solid'
|
||||
case 'tutorial': return 'soft'
|
||||
case 'improvement': return 'soft'
|
||||
default: return 'soft'
|
||||
}
|
||||
}
|
||||
|
||||
const getCategoryIcon = (category: string) => {
|
||||
switch (category?.toLowerCase()) {
|
||||
case 'release': return 'i-lucide-rocket'
|
||||
case 'tutorial': return 'i-lucide-book-open'
|
||||
case 'improvement': return 'i-lucide-trending-up'
|
||||
default: return 'i-lucide-file-text'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="page" class="min-h-screen">
|
||||
<div class="border-b border-default">
|
||||
<UContainer class="py-4">
|
||||
<ULink to="/blog" class="flex items-center gap-2 text-sm">
|
||||
<UIcon name="i-lucide-chevron-left" class="size-4" />
|
||||
Back to Blog
|
||||
</ULink>
|
||||
</UContainer>
|
||||
</div>
|
||||
|
||||
<div class="py-16 sm:pt-20 pb-10">
|
||||
<UContainer class="max-w-4xl">
|
||||
<div class="text-center space-y-6">
|
||||
<div class="flex items-center justify-center gap-4 text-sm">
|
||||
<UBadge
|
||||
v-if="page.category"
|
||||
:variant="getCategoryVariant(page.category)"
|
||||
size="sm"
|
||||
class="font-mono text-xs gap-2"
|
||||
>
|
||||
<UIcon :name="getCategoryIcon(page.category)" class="size-3" />
|
||||
{{ page.category?.toUpperCase() }}
|
||||
</UBadge>
|
||||
|
||||
<span class="text-muted font-mono text-xs">
|
||||
{{ formatDate(page.date) }}
|
||||
</span>
|
||||
|
||||
<span v-if="page.minRead" class="text-muted font-mono text-xs">
|
||||
{{ page.minRead }} MIN READ
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Motion
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:animate="{ opacity: 1, y: 0 }"
|
||||
:transition="{ duration: 0.6 }"
|
||||
>
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-highlighted leading-tight">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
</Motion>
|
||||
|
||||
<Motion
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:animate="{ opacity: 1, y: 0 }"
|
||||
:transition="{ delay: 0.1, duration: 0.6 }"
|
||||
>
|
||||
<p class="text-lg text-muted max-w-2xl mx-auto leading-relaxed">
|
||||
{{ page.description }}
|
||||
</p>
|
||||
</Motion>
|
||||
|
||||
<Motion
|
||||
v-if="page.authors?.length"
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:animate="{ opacity: 1, y: 0 }"
|
||||
:transition="{ delay: 0.2, duration: 0.6 }"
|
||||
class="flex justify-center"
|
||||
>
|
||||
<UAvatarGroup>
|
||||
<ULink
|
||||
v-for="(author, index) in page.authors"
|
||||
:key="index"
|
||||
:to="author.to"
|
||||
raw
|
||||
>
|
||||
<UAvatar v-bind="author.avatar" />
|
||||
</ULink>
|
||||
</UAvatarGroup>
|
||||
</Motion>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
|
||||
<div v-if="page.image" class="py-4">
|
||||
<UContainer class="max-w-6xl">
|
||||
<Motion
|
||||
:initial="{ opacity: 0, y: 30 }"
|
||||
:animate="{ opacity: 1, y: 0 }"
|
||||
:transition="{ delay: 0.3, duration: 0.8 }"
|
||||
>
|
||||
<NuxtImg
|
||||
:src="page.image"
|
||||
:alt="page.title"
|
||||
class="w-full max-h-[400px] object-cover object-center max-w-5xl mx-auto"
|
||||
/>
|
||||
</Motion>
|
||||
</UContainer>
|
||||
</div>
|
||||
|
||||
<div class="py-12 sm:py-16">
|
||||
<UContainer class="max-w-3xl">
|
||||
<Motion
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:animate="{ opacity: 1, y: 0 }"
|
||||
:transition="{ delay: 0.4, duration: 0.6 }"
|
||||
>
|
||||
<ContentRenderer
|
||||
v-if="page.body"
|
||||
:value="page"
|
||||
/>
|
||||
</Motion>
|
||||
|
||||
<div v-if="surround?.length" class="mt-16 pt-8 border-t border-default">
|
||||
<Motion
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:animate="{ opacity: 1, y: 0 }"
|
||||
:transition="{ delay: 0.6, duration: 0.6 }"
|
||||
>
|
||||
<UContentSurround :surround="surround" />
|
||||
</Motion>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,255 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
// @ts-expect-error - yaml import not typed
|
||||
import page from '.blog.yml'
|
||||
|
||||
const { data: posts } = await useAsyncData('blogs', () =>
|
||||
queryCollection('blog').order('date', 'DESC').all()
|
||||
)
|
||||
|
||||
const title = page.seo?.title || page.title
|
||||
const description = page.seo?.description || page.description
|
||||
|
||||
useSeoMeta({
|
||||
title,
|
||||
description,
|
||||
ogTitle: title,
|
||||
ogDescription: description
|
||||
})
|
||||
|
||||
const selectedFilter = ref('all')
|
||||
const searchQuery = ref('')
|
||||
|
||||
const availableFilters = computed(() => {
|
||||
if (!posts.value?.length) return [{ key: 'all', label: 'ALL', count: 0 }]
|
||||
|
||||
const postsData = posts.value
|
||||
const categories = new Set(postsData.map(post => post.category?.toLowerCase()).filter(Boolean))
|
||||
|
||||
const filters = [
|
||||
{ key: 'all', label: 'ALL', count: postsData.length }
|
||||
]
|
||||
|
||||
categories.forEach((category) => {
|
||||
const count = postsData.filter(p => p.category?.toLowerCase() === category).length
|
||||
const label = category.replace(/\b\w/g, l => l.toUpperCase()).replace(/([a-z])([A-Z])/g, '$1 $2')
|
||||
|
||||
filters.push({
|
||||
key: category,
|
||||
label: label,
|
||||
count
|
||||
})
|
||||
})
|
||||
|
||||
return filters.sort((a, b) => {
|
||||
if (a.key === 'all') return -1
|
||||
if (b.key === 'all') return 1
|
||||
return b.count - a.count
|
||||
})
|
||||
})
|
||||
|
||||
const filteredPosts = computed(() => {
|
||||
if (!posts.value) return []
|
||||
|
||||
let filtered = posts.value
|
||||
|
||||
if (selectedFilter.value !== 'all') {
|
||||
filtered = filtered.filter(post => post.category?.toLowerCase() === selectedFilter.value)
|
||||
}
|
||||
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
filtered = filtered.filter(post =>
|
||||
post.title?.toLowerCase().includes(query)
|
||||
|| post.description?.toLowerCase().includes(query)
|
||||
)
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: '2-digit'
|
||||
}).toUpperCase()
|
||||
}
|
||||
|
||||
const getCategoryVariant = (category: string) => {
|
||||
switch (category?.toLowerCase()) {
|
||||
case 'release': return 'solid'
|
||||
case 'tutorial': return 'soft'
|
||||
case 'improvement': return 'soft'
|
||||
default: return 'soft'
|
||||
}
|
||||
}
|
||||
|
||||
const getCategoryIcon = (category: string) => {
|
||||
switch (category?.toLowerCase()) {
|
||||
case 'release': return 'i-lucide-rocket'
|
||||
case 'tutorial': return 'i-lucide-book-open'
|
||||
case 'improvement': return 'i-lucide-trending-up'
|
||||
default: return 'i-lucide-file-text'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="page" class="relative grid grid-rows-[auto_auto_1fr] min-h-[calc(100vh-150px)]">
|
||||
<UPageHero :links="page.links" :ui="{ container: 'relative py-10 sm:py-16 lg:py-24' }">
|
||||
<LazyStarsBg />
|
||||
|
||||
<div aria-hidden="true" class="absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
|
||||
|
||||
<template #title>
|
||||
<MDC :value="page.title" unwrap="p" cache-key="pro-templates-hero-title" />
|
||||
</template>
|
||||
|
||||
<template #description>
|
||||
<MDC :value="page.description" unwrap="p" cache-key="pro-templates-hero-description" />
|
||||
</template>
|
||||
</UPageHero>
|
||||
|
||||
<UPageBody class="!my-0 !py-0 border-y border-default">
|
||||
<UContainer>
|
||||
<div class="border-x border-default px-4 sm:px-6 py-6 sm:py-8">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6 lg:gap-8 sm:mb-6">
|
||||
<div class="flex flex-wrap items-center gap-2 sm:gap-3">
|
||||
<Motion
|
||||
v-for="(filter, index) in availableFilters"
|
||||
:key="filter.key"
|
||||
:initial="{ opacity: 0, y: 10 }"
|
||||
:animate="{ opacity: 1, y: 0 }"
|
||||
:transition="{ delay: index * 0.1 }"
|
||||
>
|
||||
<UButton
|
||||
:variant="selectedFilter === filter.key ? 'solid' : 'ghost'"
|
||||
:color="selectedFilter === filter.key ? 'primary' : 'neutral'"
|
||||
size="sm"
|
||||
class="font-medium transition-all duration-200 hover:scale-105 focus:scale-100 rounded-none text-xs sm:text-sm"
|
||||
:leading-icon="selectedFilter === filter.key ? 'i-lucide-check' : 'i-lucide-circle'"
|
||||
:label="filter.label"
|
||||
@click="selectedFilter = filter.key"
|
||||
>
|
||||
<template #trailing>
|
||||
<UBadge
|
||||
:variant="selectedFilter === filter.key ? 'solid' : 'soft'"
|
||||
size="xs"
|
||||
>
|
||||
{{ filter.count }}
|
||||
</UBadge>
|
||||
</template>
|
||||
</UButton>
|
||||
</Motion>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3">
|
||||
<div class="relative">
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
placeholder="Search posts..."
|
||||
icon="i-lucide-search"
|
||||
class="w-full sm:w-64"
|
||||
:ui="{
|
||||
base: 'rounded-none'
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
variant="ghost"
|
||||
class="rounded-none whitespace-nowrap"
|
||||
icon="i-lucide-external-link"
|
||||
label="Follow @nuxt_js on X"
|
||||
to="https://x.com/nuxt_js"
|
||||
target="_blank"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-x border-t border-default !gap-0">
|
||||
<Motion
|
||||
v-for="(post, index) in filteredPosts"
|
||||
:key="post.path"
|
||||
:initial="{ opacity: 0, x: -20 }"
|
||||
:animate="{ opacity: 1, x: 0 }"
|
||||
:transition="{ delay: index * 0.05, type: 'spring', stiffness: 300, damping: 30 }"
|
||||
class="group border-b border-default last:border-b-0"
|
||||
>
|
||||
<ULink
|
||||
:to="post.path"
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between p-4 sm:p-6 hover:bg-muted/30 transition-all duration-200 gap-4 sm:gap-6"
|
||||
>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 flex-1 min-w-0">
|
||||
<div class="text-xs text-muted font-mono shrink-0 sm:min-w-[60px]">
|
||||
{{ formatDate(post.date) }}
|
||||
</div>
|
||||
|
||||
<UBadge
|
||||
:variant="getCategoryVariant(post.category)"
|
||||
size="sm"
|
||||
class="font-mono text-xs justify-center gap-2 shrink-0 self-start sm:self-center"
|
||||
>
|
||||
<UIcon :name="getCategoryIcon(post.category)" class="size-3" />
|
||||
{{ post.category?.toUpperCase() || 'POST' }}
|
||||
</UBadge>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-medium text-highlighted group-hover:text-primary transition-colors duration-200 truncate sm:text-base">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-muted mt-1 line-clamp-2 sm:line-clamp-1">
|
||||
{{ post.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between sm:justify-end gap-3 sm:gap-2 shrink-0">
|
||||
<UAvatarGroup v-if="post.authors?.length" size="sm" class="sm:size-sm">
|
||||
<UAvatar
|
||||
v-for="author in post.authors.slice(0, 3)"
|
||||
:key="author.name"
|
||||
:src="author.avatar?.src"
|
||||
:alt="author.name"
|
||||
size="sm"
|
||||
/>
|
||||
</UAvatarGroup>
|
||||
|
||||
<UIcon
|
||||
name="i-lucide-chevron-right"
|
||||
class="size-4 text-muted group-hover:text-highlighted transition-colors duration-200 shrink-0"
|
||||
/>
|
||||
</div>
|
||||
</ULink>
|
||||
</Motion>
|
||||
|
||||
<Motion
|
||||
v-if="filteredPosts.length === 0"
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:animate="{ opacity: 1, y: 0 }"
|
||||
class="text-center py-12 sm:py-16 px-4 sm:px-6"
|
||||
>
|
||||
<UIcon name="i-lucide-search-x" class="size-10 sm:size-12 text-muted mx-auto mb-4" />
|
||||
<h3 class="text-lg font-medium mb-2">
|
||||
No posts found
|
||||
</h3>
|
||||
<p class="text-muted mb-4 text-sm sm:text-base">
|
||||
{{ searchQuery ? `No posts match "${searchQuery}"` : 'No posts in this category yet' }}
|
||||
</p>
|
||||
<UButton
|
||||
v-if="selectedFilter !== 'all' || searchQuery"
|
||||
variant="outline"
|
||||
label="Clear filters"
|
||||
class="rounded-none"
|
||||
@click="selectedFilter = 'all'; searchQuery = ''"
|
||||
/>
|
||||
</Motion>
|
||||
</div>
|
||||
</UContainer>
|
||||
</UPageBody>
|
||||
|
||||
<UContainer class="relative min-h-24">
|
||||
<div aria-hidden="true" class="absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
|
||||
</UContainer>
|
||||
</div>
|
||||
</template>
|
||||
@@ -13,22 +13,6 @@ const Button = z.object({
|
||||
target: z.enum(['_blank', '_self']).optional()
|
||||
})
|
||||
|
||||
const Image = z.object({
|
||||
src: z.string(),
|
||||
alt: z.string(),
|
||||
width: z.number().optional(),
|
||||
height: z.number().optional()
|
||||
})
|
||||
|
||||
const Author = z.object({
|
||||
name: z.string(),
|
||||
description: z.string().optional(),
|
||||
username: z.string().optional(),
|
||||
twitter: z.string().optional(),
|
||||
to: z.string().optional(),
|
||||
avatar: Image.optional()
|
||||
})
|
||||
|
||||
const schema = z.object({
|
||||
category: z.enum(['layout', 'form', 'element', 'navigation', 'data', 'overlay']).optional(),
|
||||
framework: z.string().optional(),
|
||||
@@ -91,18 +75,5 @@ export const collections = {
|
||||
})
|
||||
}))
|
||||
})
|
||||
}),
|
||||
blog: defineCollection({
|
||||
type: 'page',
|
||||
source: 'blog/*',
|
||||
schema: z.object({
|
||||
image: z.string().editor({ input: 'media' }),
|
||||
authors: z.array(Author),
|
||||
date: z.string().date(),
|
||||
minRead: z.number(),
|
||||
draft: z.boolean().optional(),
|
||||
category: z.enum(['Release', 'Tutorial', 'Announcement', 'Article']),
|
||||
tags: z.array(z.string())
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,198 +0,0 @@
|
||||
---
|
||||
title: Nuxt UI v3
|
||||
description: Nuxt UI v3 is out! After 1500+ commits, this major redesign brings
|
||||
improved accessibility, Tailwind CSS v4 support, and full Vue compatibility
|
||||
navigation: false
|
||||
image: /assets/blog/nuxt-ui-v3.png
|
||||
minRead: 7
|
||||
authors:
|
||||
- name: Benjamin Canac
|
||||
avatar:
|
||||
src: https://github.com/benjamincanac.png
|
||||
to: https://x.com/benjamincanac
|
||||
- name: Sébastien Chopin
|
||||
avatar:
|
||||
src: https://github.com/atinux.png
|
||||
to: https://x.com/atinux
|
||||
- name: Hugo Richard
|
||||
avatar:
|
||||
src: https://github.com/hugorcd.png
|
||||
to: https://x.com/hugorcd__
|
||||
date: 2025-03-12T10:00:00.000Z
|
||||
category: Release
|
||||
---
|
||||
|
||||
We are thrilled to announce the release of Nuxt UI v3, a complete redesign of our UI library that brings significant improvements in accessibility, performance, and developer experience. This major update represents over 1500 commits of hard work, collaboration, and innovation from our team and the community.
|
||||
|
||||
## 🚀 Reimagined from the Ground Up
|
||||
|
||||
Nuxt UI v3 represents a major leap forward in our journey to provide the most comprehensive UI solution for Vue and Nuxt developers. This version has been rebuilt from the ground up with modern technologies and best practices in mind.
|
||||
|
||||
### **From HeadlessUI to Reka UI**
|
||||
|
||||
With Reka UI at its core, Nuxt UI v3 delivers:
|
||||
|
||||
• Proper keyboard navigation across all interactive components
|
||||
|
||||
• ARIA attributes automatically handled for you
|
||||
|
||||
• Focus management that just works
|
||||
|
||||
• Screen reader friendly components out of the box
|
||||
|
||||
This means you can build applications that work for everyone without becoming an accessibility expert.
|
||||
|
||||
### **Tailwind CSS v4 Integration**
|
||||
|
||||
The integration with Tailwind CSS v4 brings huge performance improvements:
|
||||
|
||||
• **5x faster runtime** with optimized component rendering
|
||||
|
||||
• **100x faster build times** thanks to the new CSS-first engine
|
||||
|
||||
• Smaller bundle sizes with more efficient styling
|
||||
|
||||
Your applications will feel snappier, build quicker, and load faster for your users.
|
||||
|
||||
## 🎨 A Brand New Design System
|
||||
|
||||
```html
|
||||
<!-- Before: Inconsistent color usage with duplicate dark mode classes -->
|
||||
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
|
||||
<h2 class="text-gray-900 dark:text-white text-xl mb-2">User Profile</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300">Account settings and preferences</p>
|
||||
<button class="bg-blue-500 text-white px-3 py-1 rounded mt-2">Edit Profile</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- After: Semantic design tokens with automatic dark mode support -->
|
||||
<div class="bg-muted p-4 rounded-lg">
|
||||
<h2 class="text-highlighted text-xl mb-2">User Profile</h2>
|
||||
<p class="text-muted">Account settings and preferences</p>
|
||||
<UButton color="primary" size="sm" class="mt-2">Edit Profile</UButton>
|
||||
</div>
|
||||
```
|
||||
|
||||
Our new color system includes 7 semantic color aliases:
|
||||
|
||||
| Color | Default | Description |
|
||||
|-----------------------------------|----------|--------------------------------------------------|
|
||||
| :code[primary]{.text-primary} | `blue` | Primary color to represent the brand.
|
||||
| :code[secondary]{.text-secondary} | `blue` | Secondary color to complement the primary color.
|
||||
| :code[success]{.text-success} | `green` | Used for success states.
|
||||
| :code[info]{.text-info} | `blue` | Used for informational states.
|
||||
| :code[warning]{.text-warning} | `yellow` | Used for warning states.
|
||||
| :code[error]{.text-error} | `red` | Used for form error validation states. |
|
||||
| `neutral` | `slate` | Neutral color for backgrounds, text, etc. |
|
||||
|
||||
This approach makes your codebase more maintainable and your UI more consistent—especially when working in teams. With these semantic tokens, light and dark mode transitions become effortless, as the system automatically handles the appropriate color values for each theme without requiring duplicate class definitions.
|
||||
|
||||
## 💚 Complete Vue Compatibility
|
||||
|
||||
We're really happy to expand the scope of Nuxt UI beyond the Nuxt framework. With v3, both Nuxt UI and Nuxt UI Pro now work seamlessly in any Vue project, this means you can:
|
||||
|
||||
• Use the same components across all your Vue projects
|
||||
|
||||
• Benefit from Nuxt UI's theming system in any Vue application
|
||||
|
||||
• Enjoy auto-imports and TypeScript support outside of Nuxt
|
||||
|
||||
• Leverage both basic components and advanced Pro components in any Vue project
|
||||
|
||||
```ts [vite.config.ts]
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import ui from '@nuxt/ui/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
ui()
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
## 📦 Components for Every Need
|
||||
|
||||
With 54 core components, 50 Pro components, and 42 Prose components, Nuxt UI v3 provides solutions for virtually any UI challenge:
|
||||
|
||||
• **Data Display**: Tables, charts, and visualizations that adapt to your data
|
||||
|
||||
• **Navigation**: Menus, tabs, and breadcrumbs that guide users intuitively
|
||||
|
||||
• **Feedback**: Toasts, alerts, and modals that communicate clearly
|
||||
|
||||
• **Forms**: Inputs, selectors, and validation that simplify data collection
|
||||
|
||||
• **Layout**: Grids, containers, and responsive systems that organize content beautifully
|
||||
|
||||
Each component is designed to be both beautiful out of the box and deeply customizable when needed.
|
||||
|
||||
## 🔷 Improved TypeScript Integration
|
||||
|
||||
We've completely revamped our TypeScript integration, with features that make you more productive:
|
||||
|
||||
- Complete type safety with helpful autocompletion
|
||||
- Generic-based components for flexible APIs
|
||||
- Type-safe theming through a clear, consistent API
|
||||
|
||||
```ts
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
button: {
|
||||
// Your IDE will show all available options
|
||||
slots: {
|
||||
base: 'font-bold rounded-lg'
|
||||
},
|
||||
defaultVariants: {
|
||||
size: 'md',
|
||||
color: 'error'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## ⬆️ Upgrading to v3
|
||||
|
||||
We've prepared a comprehensive [migration](https://ui.nuxt.com/getting-started/migration) guide to help you upgrade from v2 to v3. While there are breaking changes due to our complete overhaul, we've worked hard to make the transition as smooth as possible.
|
||||
|
||||
## 🎯 Getting Started
|
||||
|
||||
Whether you're starting a new project or upgrading an existing one, getting started with Nuxt UI v3 is easy:
|
||||
|
||||
```bash
|
||||
# Create a new Nuxt project with Nuxt UI
|
||||
npx nuxi@latest init my-app -t ui
|
||||
```
|
||||
|
||||
::code-group{sync="pm"}
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui@latest
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add @nuxt/ui@latest
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install @nuxt/ui@latest
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun add @nuxt/ui@latest
|
||||
```
|
||||
::
|
||||
|
||||
::warning
|
||||
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss` in your project's root directory.
|
||||
::
|
||||
|
||||
Visit our [documentation](https://ui.nuxt.com/getting-started) to explore all the components and features available in Nuxt UI v3.
|
||||
|
||||
## 🙏 Thank You
|
||||
|
||||
This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality.
|
||||
|
||||
We're excited to see what you'll build with Nuxt UI v3!
|
||||
@@ -1,198 +0,0 @@
|
||||
---
|
||||
title: Nuxt UI
|
||||
description: Nuxt UI v3 is out! After 1500+ commits, this major redesign brings
|
||||
improved accessibility, Tailwind CSS v4 support, and full Vue compatibility
|
||||
navigation: false
|
||||
image: /assets/blog/nuxt-ui-v3.png
|
||||
minRead: 7
|
||||
authors:
|
||||
- name: Benjamin Canac
|
||||
avatar:
|
||||
src: https://github.com/benjamincanac.png
|
||||
to: https://x.com/benjamincanac
|
||||
- name: Sébastien Chopin
|
||||
avatar:
|
||||
src: https://github.com/atinux.png
|
||||
to: https://x.com/atinux
|
||||
- name: Hugo Richard
|
||||
avatar:
|
||||
src: https://github.com/hugorcd.png
|
||||
to: https://x.com/hugorcd__
|
||||
date: 2025-03-12T09:00:00.000Z
|
||||
category: improvement
|
||||
---
|
||||
|
||||
We are thrilled to announce the release of Nuxt UI v3, a complete redesign of our UI library that brings significant improvements in accessibility, performance, and developer experience. This major update represents over 1500 commits of hard work, collaboration, and innovation from our team and the community.
|
||||
|
||||
## 🚀 Reimagined from the Ground Up
|
||||
|
||||
Nuxt UI v3 represents a major leap forward in our journey to provide the most comprehensive UI solution for Vue and Nuxt developers. This version has been rebuilt from the ground up with modern technologies and best practices in mind.
|
||||
|
||||
### **From HeadlessUI to Reka UI**
|
||||
|
||||
With Reka UI at its core, Nuxt UI v3 delivers:
|
||||
|
||||
• Proper keyboard navigation across all interactive components
|
||||
|
||||
• ARIA attributes automatically handled for you
|
||||
|
||||
• Focus management that just works
|
||||
|
||||
• Screen reader friendly components out of the box
|
||||
|
||||
This means you can build applications that work for everyone without becoming an accessibility expert.
|
||||
|
||||
### **Tailwind CSS v4 Integration**
|
||||
|
||||
The integration with Tailwind CSS v4 brings huge performance improvements:
|
||||
|
||||
• **5x faster runtime** with optimized component rendering
|
||||
|
||||
• **100x faster build times** thanks to the new CSS-first engine
|
||||
|
||||
• Smaller bundle sizes with more efficient styling
|
||||
|
||||
Your applications will feel snappier, build quicker, and load faster for your users.
|
||||
|
||||
## 🎨 A Brand New Design System
|
||||
|
||||
```html
|
||||
<!-- Before: Inconsistent color usage with duplicate dark mode classes -->
|
||||
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
|
||||
<h2 class="text-gray-900 dark:text-white text-xl mb-2">User Profile</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300">Account settings and preferences</p>
|
||||
<button class="bg-blue-500 text-white px-3 py-1 rounded mt-2">Edit Profile</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- After: Semantic design tokens with automatic dark mode support -->
|
||||
<div class="bg-muted p-4 rounded-lg">
|
||||
<h2 class="text-highlighted text-xl mb-2">User Profile</h2>
|
||||
<p class="text-muted">Account settings and preferences</p>
|
||||
<UButton color="primary" size="sm" class="mt-2">Edit Profile</UButton>
|
||||
</div>
|
||||
```
|
||||
|
||||
Our new color system includes 7 semantic color aliases:
|
||||
|
||||
| Color | Default | Description |
|
||||
|-----------------------------------|----------|--------------------------------------------------|
|
||||
| :code[primary]{.text-primary} | `blue` | Primary color to represent the brand.
|
||||
| :code[secondary]{.text-secondary} | `blue` | Secondary color to complement the primary color.
|
||||
| :code[success]{.text-success} | `green` | Used for success states.
|
||||
| :code[info]{.text-info} | `blue` | Used for informational states.
|
||||
| :code[warning]{.text-warning} | `yellow` | Used for warning states.
|
||||
| :code[error]{.text-error} | `red` | Used for form error validation states. |
|
||||
| `neutral` | `slate` | Neutral color for backgrounds, text, etc. |
|
||||
|
||||
This approach makes your codebase more maintainable and your UI more consistent—especially when working in teams. With these semantic tokens, light and dark mode transitions become effortless, as the system automatically handles the appropriate color values for each theme without requiring duplicate class definitions.
|
||||
|
||||
## 💚 Complete Vue Compatibility
|
||||
|
||||
We're really happy to expand the scope of Nuxt UI beyond the Nuxt framework. With v3, both Nuxt UI and Nuxt UI Pro now work seamlessly in any Vue project, this means you can:
|
||||
|
||||
• Use the same components across all your Vue projects
|
||||
|
||||
• Benefit from Nuxt UI's theming system in any Vue application
|
||||
|
||||
• Enjoy auto-imports and TypeScript support outside of Nuxt
|
||||
|
||||
• Leverage both basic components and advanced Pro components in any Vue project
|
||||
|
||||
```ts [vite.config.ts]
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import ui from '@nuxt/ui/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
ui()
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
## 📦 Components for Every Need
|
||||
|
||||
With 54 core components, 50 Pro components, and 42 Prose components, Nuxt UI v3 provides solutions for virtually any UI challenge:
|
||||
|
||||
• **Data Display**: Tables, charts, and visualizations that adapt to your data
|
||||
|
||||
• **Navigation**: Menus, tabs, and breadcrumbs that guide users intuitively
|
||||
|
||||
• **Feedback**: Toasts, alerts, and modals that communicate clearly
|
||||
|
||||
• **Forms**: Inputs, selectors, and validation that simplify data collection
|
||||
|
||||
• **Layout**: Grids, containers, and responsive systems that organize content beautifully
|
||||
|
||||
Each component is designed to be both beautiful out of the box and deeply customizable when needed.
|
||||
|
||||
## 🔷 Improved TypeScript Integration
|
||||
|
||||
We've completely revamped our TypeScript integration, with features that make you more productive:
|
||||
|
||||
- Complete type safety with helpful autocompletion
|
||||
- Generic-based components for flexible APIs
|
||||
- Type-safe theming through a clear, consistent API
|
||||
|
||||
```ts
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
button: {
|
||||
// Your IDE will show all available options
|
||||
slots: {
|
||||
base: 'font-bold rounded-lg'
|
||||
},
|
||||
defaultVariants: {
|
||||
size: 'md',
|
||||
color: 'error'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## ⬆️ Upgrading to v3
|
||||
|
||||
We've prepared a comprehensive [migration](https://ui.nuxt.com/getting-started/migration) guide to help you upgrade from v2 to v3. While there are breaking changes due to our complete overhaul, we've worked hard to make the transition as smooth as possible.
|
||||
|
||||
## 🎯 Getting Started
|
||||
|
||||
Whether you're starting a new project or upgrading an existing one, getting started with Nuxt UI v3 is easy:
|
||||
|
||||
```bash
|
||||
# Create a new Nuxt project with Nuxt UI
|
||||
npx nuxi@latest init my-app -t ui
|
||||
```
|
||||
|
||||
::code-group{sync="pm"}
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui@latest
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add @nuxt/ui@latest
|
||||
```
|
||||
|
||||
```bash [npm]
|
||||
npm install @nuxt/ui@latest
|
||||
```
|
||||
|
||||
```bash [bun]
|
||||
bun add @nuxt/ui@latest
|
||||
```
|
||||
::
|
||||
|
||||
::warning
|
||||
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss` in your project's root directory.
|
||||
::
|
||||
|
||||
Visit our [documentation](https://ui.nuxt.com/getting-started) to explore all the components and features available in Nuxt UI v3.
|
||||
|
||||
## 🙏 Thank You
|
||||
|
||||
This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality.
|
||||
|
||||
We're excited to see what you'll build with Nuxt UI v3!
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 515 KiB |
@@ -120,6 +120,8 @@ function getOffset(index: number) {
|
||||
:close="(toast.close as boolean)"
|
||||
:data-expanded="expanded"
|
||||
:data-front="!expanded && index === toasts.length - 1"
|
||||
:data-second="!expanded && index === toasts.length - 2"
|
||||
:data-third="!expanded && index === toasts.length - 3"
|
||||
:style="{
|
||||
'--index': (index - toasts.length) + toasts.length,
|
||||
'--before': toasts.length - 1 - index,
|
||||
|
||||
@@ -71,7 +71,7 @@ function _useOverlay() {
|
||||
isMounted: !!defaultOpen,
|
||||
destroyOnClose: !!destroyOnClose,
|
||||
originalProps: props || {},
|
||||
props: { ...(props || {}) }
|
||||
props: { ...props }
|
||||
})
|
||||
|
||||
overlays.push(options)
|
||||
@@ -135,7 +135,7 @@ function _useOverlay() {
|
||||
const patch = <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>): void => {
|
||||
const overlay = getOverlay(id)
|
||||
|
||||
overlay.props = { ...props }
|
||||
overlay.props = { ...overlay.props, ...props }
|
||||
}
|
||||
|
||||
const getOverlay = (id: symbol): Overlay => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default {
|
||||
slots: {
|
||||
viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none',
|
||||
base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out'
|
||||
viewport: 'fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none transition-all duration-500 ease-in-out',
|
||||
base: 'pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:max-h-[calc(var(--front-height)+0.5rem)] data-[expanded=false]:data-[front=false]:min-h-[3rem] data-[expanded=false]:data-[front=false]:overflow-hidden data-[expanded=false]:data-[front=false]:data-[second=false]:data-[third=false]:opacity-0 data-[expanded=false]:data-[second=true]:opacity-60 data-[expanded=false]:data-[third=true]:opacity-30 data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-200 transition-[transform,translate,max-height,opacity] duration-200 ease-out data-[state=closed]:animate-[toast-closed_200ms_ease-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-out] data-[swipe=move]:transition-none'
|
||||
},
|
||||
variants: {
|
||||
position: {
|
||||
@@ -35,13 +35,13 @@ export default {
|
||||
position: ['top-left', 'top-center', 'top-right'],
|
||||
class: {
|
||||
viewport: 'top-4',
|
||||
base: 'top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]'
|
||||
base: 'top-0 data-[state=open]:animate-[slide-in-from-top_280ms_cubic-bezier(0.4,0,0.6,1)]'
|
||||
}
|
||||
}, {
|
||||
position: ['bottom-left', 'bottom-center', 'bottom-right'],
|
||||
class: {
|
||||
viewport: 'bottom-4',
|
||||
base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]'
|
||||
base: 'bottom-0 data-[state=open]:animate-[slide-in-from-bottom_280ms_cubic-bezier(0.4,0,0.6,1)]'
|
||||
}
|
||||
}, {
|
||||
swipeDirection: ['left', 'right'],
|
||||
|
||||
Reference in New Issue
Block a user