\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_",[2884,2885,2888],{"name":2868,"color":2869},{"name":2886,"color":2887},"pro","5BD3CB",{"name":2871,"color":2872},2306,"HeaderLinks: properties class and icon has no effects","2025-02-17T00:12:08Z","https://github.com/nuxt/ui/issues/2306",0.7397924,{"description":2895,"labels":2896,"number":2899,"owner":2874,"repository":2875,"state":2876,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### 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```",[2897,2898],{"name":2868,"color":2869},{"name":2871,"color":2872},2856,"UTable cell content refuses to wrap","2024-12-06T23:25:36Z","https://github.com/nuxt/ui/issues/2856",0.7528034,{"description":2905,"labels":2906,"number":2911,"owner":2874,"repository":2875,"state":2912,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### 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_",[2907,2908],{"name":2868,"color":2869},{"name":2909,"color":2910},"documentation","0075ca",2237,"closed","Couldn't resolve component \"default\" at \"/:slug\"","2024-10-02T14:22:51Z","https://github.com/nuxt/ui/issues/2237",0.71094793,{"description":2918,"labels":2919,"number":2924,"owner":2874,"repository":2875,"state":2912,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### 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_",[2920,2921],{"name":2868,"color":2869},{"name":2922,"color":2923},"v3","49DCB8",2321,"Slideover feels strange","2024-10-15T15:29:56Z","https://github.com/nuxt/ui/issues/2321",0.7145495,{"description":2930,"labels":2931,"number":2934,"owner":2874,"repository":2875,"state":2912,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### 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```",[2932,2933],{"name":2868,"color":2869},{"name":2922,"color":2923},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.7189185,{"description":2940,"labels":2941,"number":2948,"owner":2874,"repository":2949,"state":2912,"title":2950,"updated_at":2951,"url":2952,"score":2953},"I've explored other font providers, looks like `fontsource` is also quite promising.\r\n\r\nCurrently most of its fonts are from Google Fonts, along with some icons and some other fonts. It's also the service that Cloudflare Fonts is fetching from.\r\n\r\n@danielroe Would you like to include this font provider? If so, I'd like to work on it.\r\n\r\nDocs: https://fontsource.org/docs",[2942,2945],{"name":2943,"color":2944},"enhancement","a2eeef",{"name":2946,"color":2947},"provider","1161A4",65,"fonts","feat: fontsource provider","2024-03-20T13:12:12Z","https://github.com/nuxt/fonts/issues/65",0.724108,{"description":2955,"labels":2956,"number":2963,"owner":2874,"repository":2875,"state":2912,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Description\n\nIs there a way to prevent popovers from closing when clicking outside the popover?",[2957,2960,2962],{"name":2958,"color":2959},"question","d876e3",{"name":2961,"color":2872},"wontfix-v2",{"name":2922,"color":2923},2245,"Popover close-prevented","2024-11-10T09:20:02Z","https://github.com/nuxt/ui/issues/2245",0.7276211,{"description":2969,"labels":2970,"number":2973,"owner":2874,"repository":2875,"state":2912,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### 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_",[2971,2972],{"name":2868,"color":2869},{"name":2922,"color":2923},2371,"[Form] Input events validate-on code example missing.","2024-10-23T20:25:52Z","https://github.com/nuxt/ui/issues/2371",0.7293425,{"description":2979,"labels":2980,"number":2984,"owner":2874,"repository":2875,"state":2912,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### Environment\n\n- Operating System: Windows 10 \n- Node Version: v22.10.0 \n- Nuxt Version: 3.16.0 \n- CLI Version: 3.22.5 \n- Nitro Version: 2.11.5 \n- Package Manager: pnpm@9.15.7 \n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, meta, ssr, runtimeConfig, ui \n- Runtime Modules: @nuxt/ui@3.0.0-beta.3, @nuxt/icon@1.10.3, @nuxt/fonts@0.11.0, @vueuse/nuxt@12.8.2\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt UI 3.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n\u003CUInput\n v-model=\"translation\"\n ref=\"translationField\" \n />\n\u003C/template>\n\n\u003Cscript setup>\nconst translationField = ref(null)\n\nfunction nextCard() {\n translationField.value.focus() // throws: 'focus is not a function'\n \n nextTick(() => {\n translationField.value.focus() // same error\n })\n\n // below works ok\n nextTick(() => {\n const input = translationField.value?.$el?.querySelector('input')\n if (input) {\n input.focus()\n }\n })\n}\n\u003C/script>\n```\n\n\n### Description\nStandard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'\nIn the above code snippet I included workaround (credits to Sonnet 3.5)\nTried it dozen of times and checked this place to see if it has not been solved earlier.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2981,2982,2983],{"name":2868,"color":2869},{"name":2922,"color":2923},{"name":2871,"color":2872},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7365005,["Reactive",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxvQrbfCqH6o36zvXVm_OAXdEMw9-VtWGDMhWaFMenS4":-1},"/nuxt/ui/2935"]