chore(release): v2.22.1

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @benjamincanac

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: release
 on:
   push:
     tags:
-      - '*'
+      - 'v2*'
 
 jobs:
   publish:

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.22.1](https://github.com/nuxt/ui/compare/v2.22.0...v2.22.1) (2025-07-16)
+
+### Bug Fixes
+
+* **Badge/Button:** support numeric zero as visible label ([#4116](https://github.com/nuxt/ui/issues/4116)) ([2971a31](https://github.com/nuxt/ui/commit/2971a3124299e927ddb506bb0fc61b906aa0cfeb))
+
 ## [2.22.0](https://github.com/nuxt/ui/compare/v2.21.1...v2.22.0) (2025-04-22)
 
 ### ⚠ BREAKING CHANGES

docs/components/content/examples/DatePickerRangeExample.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { sub, format, isSameDay, type Duration } from 'date-fns'
+import { sub, format, isSameDay } from 'date-fns'
+import type { Duration } from 'date-fns'
 
 const ranges = [
   { label: 'Last 7 days', duration: { days: 7 } },

docs/components/content/examples/FormExampleSuperstruct.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { object, string, nonempty, type Infer } from 'superstruct'
+import { object, string, nonempty } from 'superstruct'
+import type { Infer } from 'superstruct'
 import type { FormSubmitEvent } from '#ui/types'
 
 const schema = object({

docs/components/content/examples/FormExampleYup.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { object, string, type InferType } from 'yup'
+import { object, string } from 'yup'
+import type { InferType } from 'yup'
 import type { FormSubmitEvent } from '#ui/types'
 
 const schema = object({

docs/nuxt.config.ts

@@ -26,8 +26,7 @@ export default defineNuxtConfig({
     module,
     '@nuxtjs/plausible',
     '@vueuse/nuxt',
-    'nuxt-component-meta',
-    'nuxt-cloudflare-analytics'
+    'nuxt-component-meta'
   ],
 
   site: {
@@ -119,11 +118,6 @@ export default defineNuxtConfig({
     }
   },
 
-  cloudflareAnalytics: {
-    token: '1e2b0c5e9a214f0390b9b94e043d8d4c',
-    scriptPath: false
-  },
-
   componentMeta: {
     exclude: [
       '@nuxt/content',

docs/package.json

@@ -4,28 +4,27 @@
   "type": "module",
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.2",
-    "@iconify-json/lucide": "^1.2.37",
-    "@iconify-json/simple-icons": "^1.2.32",
-    "@iconify-json/vscode-icons": "^1.2.19",
+    "@iconify-json/lucide": "^1.2.57",
+    "@iconify-json/simple-icons": "^1.2.43",
+    "@iconify-json/vscode-icons": "^1.2.23",
     "@nuxt/content": "^2.13.4",
-    "@nuxt/fonts": "^0.11.1",
+    "@nuxt/fonts": "^0.11.4",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "^1.7.1",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@fdb0248",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^21.1.1",
-    "@vueuse/nuxt": "^13.1.0",
+    "@vueuse/nuxt": "^13.5.0",
     "date-fns": "^4.1.0",
     "joi": "^17.13.3",
-    "nuxt": "^3.16.2",
-    "nuxt-cloudflare-analytics": "^1.0.8",
-    "nuxt-component-meta": "^0.10.1",
-    "nuxt-og-image": "^5.1.2",
-    "prettier": "^3.5.3",
+    "nuxt": "^4.0.0",
+    "nuxt-component-meta": "^0.12.1",
+    "nuxt-og-image": "^5.1.9",
+    "prettier": "^3.6.2",
     "ufo": "^1.6.1",
     "v-calendar": "^3.1.2",
-    "valibot": "^1.0.0",
+    "valibot": "^1.1.0",
     "yup": "^1.6.1",
-    "zod": "^3.24.3"
+    "zod": "^4.0.5"
   }
 }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "2.22.0",
-  "packageManager": "pnpm@10.9.0",
+  "version": "2.22.1",
+  "packageManager": "pnpm@10.13.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -44,19 +44,19 @@
     "@headlessui/tailwindcss": "^0.2.2",
     "@headlessui/vue": "^1.7.23",
     "@iconify-json/heroicons": "^1.2.2",
-    "@nuxt/icon": "^1.12.0",
-    "@nuxt/kit": "^3.16.2",
+    "@nuxt/icon": "^1.15.0",
+    "@nuxt/kit": "^4.0.0",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/tailwindcss": "^6.13.2",
+    "@nuxtjs/tailwindcss": "^6.14.0",
     "@popperjs/core": "^2.11.8",
     "@standard-schema/spec": "^1.0.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
-    "@vueuse/core": "^13.1.0",
-    "@vueuse/integrations": "^13.1.0",
-    "@vueuse/math": "^13.1.0",
+    "@vueuse/core": "^13.5.0",
+    "@vueuse/integrations": "^13.5.0",
+    "@vueuse/math": "^13.5.0",
     "defu": "^6.1.4",
     "fuse.js": "^7.1.0",
     "ohash": "^2.0.11",
@@ -66,19 +66,19 @@
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.3.0",
+    "@nuxt/eslint-config": "^1.5.2",
     "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/test-utils": "^3.17.2",
+    "@nuxt/test-utils": "^3.19.2",
     "@release-it/conventional-changelog": "^10.0.1",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.25.0",
-    "happy-dom": "^17.4.4",
-    "nuxt": "^3.16.2",
-    "release-it": "^19.0.1",
+    "eslint": "^9.31.0",
+    "happy-dom": "^18.0.1",
+    "nuxt": "^4.0.0",
+    "release-it": "^19.0.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.1",
+    "vitest": "^3.2.4",
     "vitest-environment-nuxt": "^1.0.1",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^3.0.1"
   },
   "peerDependencies": {
     "joi": "^17.13.0",
@@ -108,7 +108,11 @@
     "@nuxt/ui": "workspace:*",
     "@nuxt/content": "2.13.2",
     "@nuxtjs/mdc": "0.9.0",
-    "chokidar": "3.6.0",
-    "vue-tsc": "2.1.10"
+    "@vueuse/core": "^13.5.0",
+    "@vueuse/integrations": "^13.5.0",
+    "@vueuse/math": "^13.5.0",
+    "@vueuse/nuxt": "13.1.0",
+    "unimport": "4.1.1",
+    "chokidar": "3.6.0"
   }
 }

playground/package.json

@@ -9,6 +9,6 @@
   },
   "dependencies": {
     "@nuxt/ui": "latest",
-    "nuxt": "^3.16.2"
+    "nuxt": "^4.0.0"
   }
 }

scripts/release.sh

@@ -13,4 +13,4 @@ fi
 
 # Release package
 echo "Publishing @nuxt/ui"
-npm publish -q --access public
+npm publish --access public --no-tag

src/runtime/components/elements/Badge.vue

@@ -5,7 +5,7 @@
     </slot>
 
     <slot>
-      <span v-if="label">
+      <span v-if="label !== undefined && label !== null">
         {{ label }}
       </span>
     </slot>

src/runtime/components/elements/Button.vue

@@ -5,7 +5,7 @@
     </slot>
 
     <slot>
-      <span v-if="label" :class="[truncate ? ui.truncate : '']">
+      <span v-if="label !== undefined && label !== null" :class="[truncate ? ui.truncate : '']">
         {{ label }}
       </span>
     </slot>

src/runtime/components/elements/Link.vue

@@ -33,7 +33,8 @@
 
 <script lang="ts">
 import { isEqual, diff } from 'ohash/utils'
-import { type PropType, defineComponent } from 'vue'
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
 import { nuxtLinkProps } from '../../utils'
 
 export default defineComponent({

src/runtime/components/forms/Form.vue

@@ -5,7 +5,8 @@
 </template>
 
 <script lang="ts">
-import { provide, ref, type PropType, defineComponent, onUnmounted, onMounted, readonly } from 'vue'
+import { provide, ref, defineComponent, onUnmounted, onMounted, readonly } from 'vue'
+import type { PropType } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'

src/runtime/composables/useCarouselScroll.ts

@@ -1,4 +1,5 @@
-import { ref, type Ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
 
 export const useCarouselScroll = (el: Ref<HTMLElement>) => {
   const x = ref<number>(0)

src/runtime/composables/useFormGroup.ts

@@ -1,5 +1,6 @@
 import { inject, ref, computed } from 'vue'
-import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
+import { useDebounceFn } from '@vueuse/core'
+import type { UseEventBusReturn } from '@vueuse/core'
 import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
 
 type InputProps = {

src/runtime/types/component.d.ts

@@ -1,14 +1,14 @@
-export type ComponentProps<T> =
-T extends new () => { $props: infer P } ? NonNullable<P> :
-  T extends (props: infer P, ...args: any) => any ? P :
-      {}
+export type ComponentProps<T>
+= T extends new () => { $props: infer P } ? NonNullable<P>
+  : T extends (props: infer P, ...args: any) => any ? P
+    : {}
 
-export type ComponentSlots<T> =
-T extends new () => { $slots: infer S } ? NonNullable<S> :
-  T extends (props: any, ctx: { slots: infer S, attrs: any, emit: any }, ...args: any) => any ? NonNullable<S> :
-      {}
+export type ComponentSlots<T>
+= T extends new () => { $slots: infer S } ? NonNullable<S>
+  : T extends (props: any, ctx: { slots: infer S, attrs: any, emit: any }, ...args: any) => any ? NonNullable<S>
+    : {}
 
-export type ComponentEmit<T> =
-T extends new () => { $emit: infer E } ? NonNullable<E> :
-  T extends (props: any, ctx: { slots: any, attrs: any, emit: infer E }, ...args: any) => any ? NonNullable<E> :
-      {}
+export type ComponentEmit<T>
+= T extends new () => { $emit: infer E } ? NonNullable<E>
+  : T extends (props: any, ctx: { slots: any, attrs: any, emit: infer E }, ...args: any) => any ? NonNullable<E>
+    : {}

src/runtime/types/utils.d.ts

@@ -18,8 +18,8 @@ export type NestedKeyOf<ObjectType extends Record<string, any>> = {
     : Key
 }[keyof ObjectType]
 
-type DeepKey<T, Keys extends string[]> =
-  Keys extends [infer First, ...infer Rest]
+type DeepKey<T, Keys extends string[]>
+  = Keys extends [infer First, ...infer Rest]
     ? First extends keyof T
       ? Rest extends string[]
         ? DeepKey<T[First], Rest>