\n \u003C/template>\n\n \u003Ctemplate #panel>\n \u003Cdiv class=\"flex h-full content-center pt-[130px]\">\n \u003CUNavigationTree id=\"navtree\" :links=\"links\" default-open />\n \u003C/div>\n \u003C/template>\n \u003C/UHeader>\n\u003C/template>\n```\n\n### Workaround \nFor classes: split links in multiple UHeaderLinks with custom ui prop.\n\n\n\n```vue\n\u003Ctemplate #center>\n \u003Cdiv class=\"flex flex-row flex-nowrap gap-5\">\n \u003CUHeaderLinks\n :links=\"linksA\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n }\"\n />\n \u003CUHeaderLinks\n :links=\"linksB\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n inactive: 'hover:text-primary text-red-500 italic',\n default: {\n popover: {\n ui: {\n wrapper: 'text-red-500 italic',\n },\n },\n },\n }\"\n />\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2001,2002,2005],{"name":1985,"color":1986},{"name":2003,"color":2004},"pro","5BD3CB",{"name":1988,"color":1989},2306,"HeaderLinks: properties class and icon has no effects","2025-02-17T00:12:08Z","https://github.com/nuxt/ui/issues/2306",0.74532264,{"description":2012,"labels":2013,"number":2020,"owner":1991,"repository":1992,"state":1993,"title":2021,"updated_at":2022,"url":2023,"score":2024},"### Description\n\nI just tried the example about autoplay in [UCarousel](https://ui.nuxt.com/components/carousel#autoplay), but with TypeScript. \n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n images: string[];\n}>();\n\nconst carousel = useTemplateRef('carouselGallery');\n\nonMounted(() => {\n setInterval(() => {\n if (!carousel.value) return;\n\n if (carousel.value.page === carousel.value.pages) {\n return carousel.value.select(0);\n }\n\n carousel.value.next();\n }, 5000);\n});\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUCarousel\n ref=\"carouselGallery\"\n v-slot=\"{ item }\"\n :items=\"props.images\"\n :ui=\"{\n item: 'basis-full',\n indicators: { wrapper: 'bg-black/70 w-min px-2.5 py-1.5 gap-1 left-4 rounded-xl' },\n }\"\n class=\"overflow-hidden\"\n indicators\n >\n \u003Cimg :src=\"item\" class=\"w-full\" draggable=\"true\" />\n \u003C/UCarousel>\n\u003C/template>\n```\n\nAnd I get some TypeScript errors:\n\nProperty 'page' does not exist on type 'CreateComponentPublicInstanceWithMixins(...)\nProperty 'select' does not exist on type 'CreateComponentPublicInstanceWithMixins(...)\nProperty 'next' does not exist on type 'CreateComponentPublicInstanceWithMixins(...)\n\nHow should I correctly infer the type for UCarousel?\n\nNuxt v3.15.1\nNuxtUI v2.20.0",[2014,2017],{"name":2015,"color":2016},"question","d876e3",{"name":2018,"color":2019},"stale","ededed",3053,"How to properly use UCarousel API with TypeScript","2025-02-09T02:00:51Z","https://github.com/nuxt/ui/issues/3053",0.7515399,{"description":2026,"labels":2027,"number":2030,"owner":1991,"repository":1992,"state":1993,"title":2031,"updated_at":2032,"url":2033,"score":2034},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.9.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @sidebase/nuxt-auth@0.9.4, @nuxt/image@1.8.1\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io\n\n\n### Description\n\nThis is the code from stackblitz, but it illustrates the problem (preview above). Basically, I am following the instructions for setting certain columns to have a maximum width, but UTable doesn't seem to be following them. If it's an implementation issue on my part, my apologies, but I've stared at this for a couple of days and I can't find any reason why I can't get the cell data to wrap.\n\n\u003Ctemplate>\n \u003CUContainer class=\"min-h-screen flex items-center\">\n \u003CUCard\n class=\"flex-1\"\n :ui=\"{\n background: 'bg-gray-50 dark:bg-gray-800/50',\n ring: 'ring-1 ring-gray-300 dark:ring-gray-700',\n divide: 'divide-y divide-gray-300 dark:divide-gray-700',\n header: { base: 'font-bold' },\n }\"\n >\n \u003Ctemplate #header> Welcome to the playground! \u003C/template>\n\n \u003Cp class=\"text-gray-500 dark:text-gray-400\">Try your components here!\u003C/p>\n \u003C/UCard>\n \u003CUTable :rows=\"data\" :columns=\"columns\">\n \u003C/UTable>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup>\nconst columns = [\n {\n key: \"name\",\n label: \"Name\",\n sortable: true,\n },\n {\n key: \"address\",\n label: \"Address\",\n rowClass: \"max-w-[200px] whitespace-normal break-word\",\n width: 200\n },\n {\n key: \"description\",\n label: \"Description\",\n rowClass: \"max-w-[200px] whitespace-normal break-word\",\n width: 200\n },];\n\n const data = [\n {\n name: \"Line 1 Name\",\n address: \"Line 1 - 123 Sesame Street, Anytown USA\",\n description: \"This is a relatively short description, but should probably wrap in any case.\"\n },\n {\n name: \"Line 2 Name\",\n address: \"Line 2 - a really really really really really really really really really really Loong address\",\n description: \"This is a really really really really really really really really really really really really really long description, and needs to be wrapped.\"\n}\n ]\n\u003C/script>\n\n\u003Cstyle>\nbody {\n @apply antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900;\n}\n\u003C/style>\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2028,2029],{"name":1985,"color":1986},{"name":1988,"color":1989},2856,"UTable cell content refuses to wrap","2024-12-06T23:25:36Z","https://github.com/nuxt/ui/issues/2856",0.75329524,{"description":2036,"labels":2037,"number":2043,"owner":1991,"repository":1992,"state":1993,"title":2044,"updated_at":2045,"url":2046,"score":2047},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@11.1.0\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.2.0, @pinia/nuxt@0.10.1, @vueuse/nuxt@13.0.0, @nuxtjs/i18n@9.3.1, nuxt-security@2.2.0, @nuxt/ui@3.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/wonderful-violet-jrsqy9\n\n### Description\n\nI get a type error when using an array of strings for the `variant` key inside of `compoundVariants´:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n primary: \"green\",\n neutral: \"slate\",\n },\n select: {\n compoundVariants: [\n {\n color: \"primary\",\n variant: [\"outline\", \"subtle\"],\n class: \"data-[state='open']:ring\",\n },\n ],\n },\n },\n});\n```\n\n```\napp/app.config.ts:11:11 - error TS2322: Type 'string[]' is not assignable to type 'string'.\n\n11 variant: [\"outline\", \"subtle\"],\n ~~~~~~~\n```\n\nIt does work tho, so its only a type issue I think.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2038,2039,2042],{"name":1985,"color":1986},{"name":2040,"color":2041},"v3","49DCB8",{"name":1988,"color":1989},3579,"Type error in app config `compoundVariants`","2025-03-16T14:04:52Z","https://github.com/nuxt/ui/issues/3579",0.7544987,{"description":2049,"labels":2050,"number":2053,"owner":1991,"repository":1992,"state":2054,"title":2055,"updated_at":2056,"url":2057,"score":2058},"### Environment\n\n- Docspage\n- nuxt/ui: v3.0.0-alpha.5 \n\n### Version\n\nv3.0.0-alpha.5 \n\n### Reproduction\n\nhttps://ui3.nuxt.dev/components/slideover\n\n### Description\n\ncompared to https://ui.nuxt.com/components/slideover the new slideover feels somehow laggy. I think its due to the early focus trap and the delay from opening and closing.\n\n### Additional context\n\nwhen closing the slideover the delay for the scrollbar is prettry big.\n\n### Logs\n\n_No response_",[2051,2052],{"name":1985,"color":1986},{"name":2040,"color":2041},2321,"closed","Slideover feels strange","2024-10-15T15:29:56Z","https://github.com/nuxt/ui/issues/2321",0.7097025,{"description":2060,"labels":2061,"number":2066,"owner":1991,"repository":1992,"state":2054,"title":2067,"updated_at":2068,"url":2069,"score":2070},"### Environment\n\nThe website - https://ui.nuxt.com/getting-started\n\n### Version\n\nmain\n\n### Reproduction\n\nhttps://ui.nuxt.com/getting-started\n\n### Description\n\nNone of the children pages on the nuxt ui site have worked since updating to version 1.4.1 from the 1.3 edge version. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2062,2063],{"name":1985,"color":1986},{"name":2064,"color":2065},"documentation","0075ca",2237,"Couldn't resolve component \"default\" at \"/:slug\"","2024-10-02T14:22:51Z","https://github.com/nuxt/ui/issues/2237",0.7164558,{"description":2072,"labels":2073,"number":2076,"owner":1991,"repository":1992,"state":2054,"title":2077,"updated_at":2078,"url":2079,"score":2080},"### Environment\n\nirrelevant\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.9\",\n\n### Reproduction\n\n\n\n\n### Description\n\ncontributes to failing google lighthouse scores for this violation\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2074,2075],{"name":1985,"color":1986},{"name":2040,"color":2041},2725,"UBreadcrumb accessibility issue - Lists do not contain only \u003Cli> elements and script supporting elements (\u003Cscript> and \u003Ctemplate>).","2024-12-05T13:48:54Z","https://github.com/nuxt/ui/issues/2725",0.7261809,{"description":2082,"labels":2083,"number":2086,"owner":1991,"repository":1992,"state":2054,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### Environment\n\nOperating System: Windows_NT\nNode Version: v20.18.0\nNuxt Version: -\nCLI Version: 3.14.0\nNitro Version: -\nPackage Manager: unknown\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Version\n\nv3.0.0-alpha.6\n\n### Reproduction\n\nCannot use v3 on stackblitz so no repo.\n\n### Description\n\nThere is no code example for the `validate-on` prop. Like how do I stop blur,input and change validations?\nhttps://ui3.nuxt.dev/components/form#input-events\n\nSearched a bit on docs github repository code and I think it is something like this:\n```\n :validate-on=\"[]\" // No validation until manual trigger: 'validate' prop\n :validate-on=\"['blur']\" // Only validate on blur(or manually)\n :validate-on=\"['blur','change','input']\" // Validate on all\n```\n\nWhen you type :validate-on=\"[]\" it suggests but I didn't know if i had to put `[]`\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2084,2085],{"name":1985,"color":1986},{"name":2040,"color":2041},2371,"[Form] Input events validate-on code example missing.","2024-10-23T20:25:52Z","https://github.com/nuxt/ui/issues/2371",0.73398834,{"description":2092,"labels":2093,"number":2098,"owner":1991,"repository":1992,"state":2054,"title":2099,"updated_at":2100,"url":2101,"score":2102},"### Environment\r\n\r\n- \"@nuxt/ui\": \"^2.18.6\",\r\n- \"nuxt\": \"^3.13.2\",\r\n- \"vue\": \"^3.5.10\",\r\n\r\n### Version\r\n\r\nv2.18.6\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch\r\n\r\n### Description\r\n\r\nHello,\r\n\r\nI'm having a important nuxt ui mono repo project and I'm encountering problems with nuxt/ui since version 6.12.0 of @nuxtjs/tailwindcss. \r\n\r\nI was forced to stay in an old version of nuxt/ui to don't have the problem : \r\n\r\n```\r\n \"pnpm\": {\r\n \"overrides\": {\r\n \"@nuxtjs/tailwindcss\": \"6.11.4\",\r\n \"@nuxt/ui\": \"2.15.2\"\r\n }\r\n },\r\n```\r\n\r\n# What happens ? \r\n\r\nAt first launch, css classes used in nuxt ui components are not correctly taken into account. \r\nIt's necessary to restart a second time the app to have the correct display\r\n\r\nThe bug is present since the version 6.12.0 of nuxtjs/tailwindcss. Maybe some effect of the First Class HMR.\r\n\r\n## Step to reproduce \r\n\r\nThe code at the following link is a minimal reproduction of my project structure : https://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch\r\n\r\n- From the root project path, launch the following command : \r\n\r\n```bash\r\n# Clear the build \r\n./scripts/CleanProject.bash\r\n\r\n# Install and prepare \r\npnpm i; pnpm run dev:prepare\r\n\r\n# Launch the app\r\ncd apps/mmi-order-front-office\r\npnpm run dev\r\n```\r\n\r\n**The tailwind classes used in apps and modules are correctly displayed but the tailwind classes defined in the nuxt-ui components are not taken into account.**\r\n\r\n\r\n\r\n- Stop and restart the server\r\n\r\n```bash\r\npnpm run dev\r\n```\r\n\r\n**All tailwind classes are correctly taken into account.**\r\n\r\n\r\n\r\n\r\n\r\nThe problem is present too when building the prod version with **pnpm run build**\r\n\r\n\r\nThe problem seems to happens when using nuxt ui in a nuxt module. Please, have you any ideas, to solve this problem. \r\n\r\n\r\nThank you\r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2094,2095],{"name":1985,"color":1986},{"name":2096,"color":2097},"upstream","78bddb",2282,"Since Tailwind First Class HMR, nuxt-ui components css classes not taken into account at first launch","2024-10-18T09:16:15Z","https://github.com/nuxt/ui/issues/2282",0.73778486,["Reactive",2104],{},["Set"],["ShallowReactive",2107],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"xvQrbfCqH6o36zvXVm_OAXdEMw9-VtWGDMhWaFMenS4":-1},"/nuxt/ui/2935"]