\n\t\u003C/UApp>\n\u003C/template>\n```\n\n\nRemoving the `UApp` for a `div` or `NuxtLayout` works\n\n### Description\n\nCrashes the app. The error seems to be related to the Button component, but even on a brand-new Nuxt project with no content (without even a page) it show the error below:\n\nWhen I use NuxtLayout (or other) instead of `UApp` and use the `UButton` component anywhere, it also cause the same issue\n\n### Logs\n\n```shell-script\n500\n[vite-node] [plugin:vite:vue] [VITE_ERROR] /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/runtime/components/Button.vue\n\n\u003Cscript lang=\"ts\">\nimport { tv, type VariantProps } from 'tailwind-variants'\nimport type { AppConfig } from '@nuxt/schema'\nimport _appConfig from '#build/app.config'\nimport theme from '#build/ui/button'\nimport type { LinkProps } from './Link.vue'\nimport type { UseComponentIconsProps } from '../composables/useComponentIcons'\nimport { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'\nimport type { AvatarProps } from '../types'\nimport type { PartialString } from '../types/utils'\n\nconst appConfig = _appConfig as AppConfig & { ui: { button: Partial\u003Ctypeof theme> } }\n\nconst button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })\n\ntype ButtonVariants = VariantProps\u003Ctypeof button>\n\nexport interface ButtonProps extends UseComponentIconsProps, Omit\u003CLinkProps, 'raw' | 'custom'> {\n label?: string\n color?: ButtonVariants['color']\n variant?: ButtonVariants['variant']\n size?: ButtonVariants['size']\n /** Render the button with equal padding on all sides. */\n square?: boolean\n /** Render the button full width. */\n block?: boolean\n /** Set loading state automatically based on the `@click` promise state */\n loadingAuto?: boolean\n onClick?: ((event: MouseEvent) => void | Promise\u003Cvoid>) | Array\u003C((event: MouseEvent) => void | Promise\u003Cvoid>)>\n class?: any\n ui?: PartialString\u003Ctypeof button.slots>\n}\n\n// Injects props to use as default in the devtools playground.\nextendDevtoolsMeta\u003CButtonProps>({ defaultProps: { label: 'Click me!' } })\n\nexport interface ButtonSlots {\n leading(props?: {}): any\n default(props?: {}): any\n trailing(props?: {}): any\n}\n\u003C/script>\n\n\u003Cscript setup lang=\"ts\">\nimport { type Ref, computed, ref, inject } from 'vue'\nimport { useForwardProps } from 'radix-vue'\nimport { useComponentIcons } from '../composables/useComponentIcons'\nimport { useButtonGroup } from '../composables/useButtonGroup'\nimport { formLoadingInjectionKey } from '../composables/useFormField'\nimport { omit } from '../utils'\nimport { pickLinkProps } from '../utils/link'\nimport UIcon from './Icon.vue'\nimport UAvatar from './Avatar.vue'\nimport ULink from './Link.vue'\n\nconst props = defineProps\u003CButtonProps>()\nconst slots = defineSlots\u003CButtonSlots>()\n\nconst linkProps = useForwardProps(pickLinkProps(props))\n\nconst { orientation, size: buttonSize } = useButtonGroup\u003CButtonProps>(props)\n\nconst loadingAutoState = ref(false)\nconst formLoading = inject\u003CRef\u003Cboolean> | undefined>(formLoadingInjectionKey, undefined)\n\nasync function onClickWrapper(event: MouseEvent) {\n loadingAutoState.value = true\n const callbacks = Array.isArray(props.onClick) ? props.onClick : [props.onClick]\n try {\n await Promise.all(callbacks.map(fn => fn?.(event)))\n } finally {\n loadingAutoState.value = false\n }\n}\n\nconst isLoading = computed(() => {\n return props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit')))\n})\n\nconst { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(\n computed(() => ({ ...props, loading: isLoading.value }))\n)\n\nconst ui = computed(() => button({\n color: props.color,\n variant: props.variant,\n size: buttonSize.value,\n loading: isLoading.value,\n block: props.block,\n square: props.square || (!slots.default && !props.label),\n leading: isLeading.value,\n trailing: isTrailing.value,\n buttonGroup: orientation.value\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CULink\n :type=\"type\"\n :disabled=\"disabled || isLoading\"\n :class=\"ui.base({ class: [props.class, props.ui?.base] })\"\n v-bind=\"omit(linkProps, ['type', 'disabled'])\"\n raw\n @click=\"onClickWrapper\"\n >\n \u003Cslot name=\"leading\">\n \u003CUIcon v-if=\"isLeading && leadingIconName\" :name=\"leadingIconName\" :class=\"ui.leadingIcon({ class: props.ui?.leadingIcon })\" />\n \u003CUAvatar v-else-if=\"!!avatar\" :size=\"((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])\" v-bind=\"avatar\" :class=\"ui.leadingAvatar({ class: props.ui?.leadingAvatar })\" />\n \u003C/slot>\n\n \u003Cslot>\n \u003Cspan v-if=\"label\" :class=\"ui.label({ class: props.ui?.label })\" data-v-inspector=\"../../../node_modules/@nuxt/ui/dist/runtime/components/Button.vue:112:7\">\n {{ label }}\n \u003C/span>\n \u003C/slot>\n\n \u003Cslot name=\"trailing\">\n \u003CUIcon v-if=\"isTrailing && trailingIconName\" :name=\"trailingIconName\" :class=\"ui.trailingIcon({ class: props.ui?.trailingIcon })\" />\n \u003C/slot>\n \u003C/ULink>\n\u003C/template>\n\nat /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/runtime/components/Button.vue\n```\n\n### Additional context\n\n_No response_\n```",[2061,2062],{"name":2005,"color":2006},{"name":1988,"color":1989},2824,"`UApp` / `UButton` crashes the whole app","2024-12-05T13:49:01Z","https://github.com/nuxt/ui/issues/2824",0.635209,{"description":2069,"labels":2070,"number":2073,"owner":1994,"repository":1995,"state":2020,"title":2074,"updated_at":2075,"url":2076,"score":2077},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.15.2\n- CLI Version: 3.20.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: compatibilityDate, devtools, modules\n- Runtime Modules: @nuxt/ui@2.21.0\n- Build Modules: -\n\n### Version\n\n 2.21.0\n\n### Reproduction\n\n1. Create a new nuxt project using cli\n2. install nuxt/ui using cli command `npx nuxi@latest module add ui`\n\n### Description\n\n WARN Failed to load config ./.nuxt/nuxtui-tailwind.config.mjs due to the error below. Skipping.. nuxt:tailwindcss 8:47:34 PM\n Cannot find module 'tailwindcss/lib/lib/defaultExtractor.js'\nRequire stack:\n\nPretty sure this has got to do with an update in nitro/nuxt i saw recently @danielroe any ideas?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n Require stack:\n - .nuxt/nuxtui-tailwind.config.mjs\n at Function._resolveFilename (node:internal/modules/cjs/loader:1249:15)\n at Function.resolve (node:internal/modules/helpers:151:19)\n at jitiResolve (node_modules/.pnpm/jiti@2.4.2/node_modules/jiti/dist/jiti.cjs:1:187220)\n at jitiRequire (node_modules/.pnpm/jiti@2.4.2/node_modules/jiti/dist/jiti.cjs:1:189288)\n at import (node_modules/.pnpm/jiti@2.4.2/node_modules/jiti/dist/jiti.cjs:1:199778)\n at .nuxt/nuxtui-tailwind.config.mjs:2:31\n at eval_evalModule (node_modules/.pnpm/jiti@2.4.2/node_modules/jiti/dist/jiti.cjs:1:196325)\n at node_modules/.pnpm/jiti@2.4.2/node_modules/jiti/dist/jiti.cjs:1:194552\n at async Function.import (node_modules/.pnpm/jiti@2.4.2/node_modules/jiti/dist/jiti.cjs:1:199772)\n at async resolveConfig (node_modules/.pnpm/c12@2.0.1_magicast@0.3.5/node_modules/c12/dist/shared/c12.B4fc1S0C.mjs:343:18)\n at async loadConfig (node_modules/.pnpm/c12@2.0.1_magicast@0.3.5/node_modules/c12/dist/shared/c12.B4fc1S0C.mjs:147:23)\n at async Promise.all (index 3)\n at async loadConfigs (node_modules/.pnpm/@nuxtjs+tailwindcss@6.13.1_magicast@0.3.5_rollup@4.30.1/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:374:27)\n at async node_modules/.pnpm/@nuxtjs+tailwindcss@6.13.1_magicast@0.3.5_rollup@4.30.1/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:420:9\n at async generateApp (node_modules/.pnpm/nuxt@3.15.2_@parcel+watcher@2.5.0_@types+node@22.10.7_db0@0.2.1_ioredis@5.4.2_magicast@0.3.5__uowpedy6xy2pdmgu2ptesyqdza/node_modules/nuxt/dist/shared/nuxt.BoHAox-C.mjs:6166:5)\n at async _applyPromised (node_modules/.pnpm/perfect-debounce@1.0.0/node_modules/perfect-debounce/dist/index.mjs:54:10)\n\n```",[2071,2072],{"name":2005,"color":2006},{"name":1991,"color":1992},3139,"Failed to load config error on init","2025-03-17T14:13:36Z","https://github.com/nuxt/ui/issues/3139",0.64970946,{"description":2079,"labels":2080,"number":2083,"owner":1994,"repository":1995,"state":2020,"title":2084,"updated_at":2085,"url":2086,"score":2087},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.12.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `pnpm@9.9.0`\n- Builder: `-`\n- User Config: `devtools`, `modules`, `css`, `future`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.0.0`, `@nuxt/eslint@1.2.0`\n- Build Modules: `-`\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/lingering-night-wl8j66\n\n### Description\n\nWhen items have value `null` or `undefined` and click the select menu, app will throw an error. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nUncaught (in promise) TypeError: Cannot read properties of undefined (reading 'disabled') SelectMenu.vue:379\n at SelectMenu.vue:379:35\n at renderList (runtime-core.esm-bundler.js:2904:16)\n at SelectMenu.vue:1:1\n at renderFnWithContext (runtime-core.esm-bundler.js:692:13)\n at renderSlot (runtime-core.esm-bundler.js:2981:53)\n at ComboboxGroup.vue:38:2\n at renderFnWithContext (runtime-core.esm-bundler.js:692:13)\n at renderSlot (runtime-core.esm-bundler.js:2981:53)\n at ListboxGroup.vue:21:34\n at renderFnWithContext (runtime-core.esm-bundler.js:692:13)\n```",[2081,2082],{"name":2005,"color":2006},{"name":1991,"color":1992},3316,"`USelectMenu`: can not open drop select when options have value `null`","2025-03-15T11:31:45Z","https://github.com/nuxt/ui/issues/3316",0.6523582,{"description":2089,"labels":2090,"number":2093,"owner":1994,"repository":1995,"state":2020,"title":2094,"updated_at":2095,"url":2096,"score":2097},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nI noticed that using form validation in Nuxt UI is very simple: Add a schema to a `\u003CUForm>` component and then place `\u003CUFormGroup>`'s with the corresponding names.\n\nUnfortunately in Vue I never found a solution this simple. In fact e.g. the use of VeeValidate is very cumberstone and requires a lot of code.\n\nMight it be possible to refactor the form validation of Nuxt UI as a standalone Vue component that uses slots and provides pure functionality without styling?\n\nE.g. by providing the a \"Form\" component, that auto validated the state and providing the error messages in a reactive object, but most things are handled by the developer:\n\n```vue\n\u003CForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\" ref=\"form\">\n \u003Clabel for=\"email\">E-Mail\u003C/label>\n \u003Cinput name=\"email\" type=\"text\" v-model=\"state.email\" />\n \u003Cdiv v-if=\"form.errors.email\">{{ form.errors.email }}\u003C/div>\n\n \u003Cbutton type=\"submit\">Submit\u003C/button>\n\u003C/Form>\n```\n\nInstead of configuring how the form validates (e.g. on each change, only after pressing submit, etc) we could use states for each value like Angular does. There the form validates on each change but each value has multiple states like is-pristine, isDirty, isUntouched and by use of those values triggering the visibility of the error messages can be precisely handled. Example:\n\n```vue\n\u003CForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\" ref=\"form\">\n \u003Clabel for=\"email\">E-Mail\u003C/label>\n \u003Cinput name=\"email\" type=\"text\" v-model=\"state.email\" />\n \u003Cdiv v-if=\"form.errors.email && form.values.email.dirty\">{{ form.errors.email }}\u003C/div>\n\n \u003Cbutton type=\"submit\" :disabled=\"!form.isValid\">Submit\u003C/button>\n\u003C/Form>\n```",[2091,2092],{"name":1985,"color":1986},{"name":1988,"color":1989},2768,"Release form validation as standalone library","2024-12-16T09:47:15Z","https://github.com/nuxt/ui/issues/2768",0.65280634,["Reactive",2099],{},["Set"],["ShallowReactive",2102],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"fQTn6HcVt8KWwLegz-_wkEhjnlALyeS0fYWraIK9k5E":-1},"/nuxt/ui/2972"]