\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```",[2016,2017,2018],{"name":1985,"color":1986},{"name":1988,"color":1989},{"name":1991,"color":1992},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.71357715,{"description":2025,"labels":2026,"number":2031,"owner":1994,"repository":1995,"state":2008,"title":2032,"updated_at":2033,"url":2034,"score":2035},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v20.18.3`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.22.2`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.15.4`\n- Builder: `-`\n- User Config: `extends`, `modules`, `$development`, `devtools`, `colorMode`, `runtimeConfig`, `routeRules`, `future`, `compatibilityDate`, `vite`, `typescript`, `hooks`, `echo`, `eslint`, `i18n`, `sanctum`\n- Runtime Modules: `@nuxt/content@2.13.4`, `@nuxt/eslint@0.7.6`, `@nuxt/fonts@0.10.3`, `@nuxt/image@1.9.0`, `@nuxt/ui@2.21.0`, `@nuxthq/studio@2.2.1`, `@vueuse/nuxt@12.7.0`, `nuxt-og-image@4.1.4`, `@nuxtjs/i18n@9.2.1`, `nuxt-auth-sanctum@0.5.6`, `nuxt-laravel-echo@0.2.1`, `@nuxtjs/seo@2.2.0`\n- Build Modules: `-`\n\n\n### Version\n\n2.21.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-i7bgngfx?file=app.vue\n\n### Description\n\nIf I place a USelectMenu inside a UModal that is being opened inside USlideover, I cannot focus the select menu's input.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2027,2028],{"name":1985,"color":1986},{"name":2029,"color":2030},"upstream","78bddb",3408,"USelectMenu inside UModal inside USlideover","2025-03-24T14:19:31Z","https://github.com/nuxt/ui/issues/3408",0.714224,{"description":2037,"labels":2038,"number":2044,"owner":1994,"repository":1995,"state":2008,"title":2045,"updated_at":2046,"url":2047,"score":2048},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, eslint\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/ui-pro@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nobvious issue\n\n### Description\n\nIn the NuxtUiPro Header component, this line of code is used to define the title's aria label :\n`const ariaLabel = computed(() => (props.title || (slots.title && getSlotChildrenText(slots.title())) || 'Nuxt UI Pro').trim())\n`\n\nprops.title has a default value :\n\n`const props = withDefaults(defineProps\u003CHeaderProps\u003CT>>(), {\n title: 'Nuxt UI Pro'\n})`\n\nWhich means that if we are defining the title using the title slot instead of the title prop, the aria label will always equal to 'Nuxt UI Pro', because the first condition, which checks for the existence of props.title, will always equate to true. A simple fix would be using something like this instead :\n\n```\nconst ariaLabel = computed(() => (\n (props.title != 'Nuxt UI Pro' && props.title) ||\n (slots.title && getSlotChildrenText(slots.title())) ||\n 'Nuxt UI Pro'\n).trim())\n```\n\nPlease let me know if this is not the right place to raise issues for the Pro version of NuxtUi, I couldn't find a better place.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2039,2040,2041],{"name":1985,"color":1986},{"name":1988,"color":1989},{"name":2042,"color":2043},"pro","5BD3CB",3833,"Title's Aria Label error with Nuxt Ui Pro's Header component","2025-04-09T12:10:13Z","https://github.com/nuxt/ui/issues/3833",0.7150027,{"description":2050,"labels":2051,"number":2055,"owner":1994,"repository":2007,"state":2008,"title":2056,"updated_at":2057,"url":2058,"score":2059},"Example: https://www.raycast.com/nhojb/brew",[2052],{"name":2053,"color":2054},"design","00bd6f",673,"[Modules] Details page","2023-09-05T08:18:34Z","https://github.com/nuxt/nuxt.com/issues/673",0.71849394,{"description":2061,"labels":2062,"number":2068,"owner":1994,"repository":1995,"state":2008,"title":2069,"updated_at":2070,"url":2071,"score":2072},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.17.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.10.0\r\n- Builder: -\r\n- User Config: extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, runtimeConfig, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.1, @nuxt/fonts@0.7.2, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.1\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-9zrfga?file=app.vue\r\n\n\n### Description\n\nHi everyone.\r\nI truly appreciate your work. Many many thanks!!\r\nI'm starting a new project, my first project with \"nuxt\" and \"nuxt ui+pro\" (I liked the dashboard theme).\r\nMaybe I'm doing something wrong, in this case please help me.\r\nOtherwise I think I found an error in the theme of the UDashboardModal component.\r\n\r\nThe background of UDashboardModal does not follow the length of its content in \"mobile view\" (small devide, in this example 400x616).\r\n\r\n\r\n\r\nIn desktop viewport work as expected.\r\n\r\n\r\n\r\nWhat's do you think?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2063,2064,2067],{"name":1985,"color":1986},{"name":2065,"color":2066},"duplicate","cfd3d7",{"name":2042,"color":2043},2220,"Issue Nuxt UI Pro UDashboardModal background ","2024-10-06T18:00:50Z","https://github.com/nuxt/ui/issues/2220",0.71885127,{"description":2074,"labels":2075,"number":2082,"owner":1994,"repository":1994,"state":2008,"title":2083,"updated_at":2084,"url":2085,"score":2086},"### Environment\n\nN/A\n\n### Reproduction\n\nvisit any module in https://nuxt.com/modules\n\n### Describe the bug\n\n### (it's in every module, wasn't like this yesterday)\r\n\u003Cimg width=\"847\" alt=\"Screenshot 2022-12-29 at 12 13 39 PM\" src=\"https://user-images.githubusercontent.com/31113245/209986597-44095cc6-64fe-4e82-ba5c-8cdc481984c8.png\">\r\n\u003Cimg width=\"849\" alt=\"Screenshot 2022-12-29 at 12 13 57 PM\" src=\"https://user-images.githubusercontent.com/31113245/209986628-a7470109-e785-44a5-9fe4-a41cdca9ace7.png\">\r\n\n\n### Additional context\n\nI posted the same issue to the modules repo https://github.com/nuxt/modules/issues/533 but got no response so decided I'd try my luck here, sorry if it's the wrong place\n\n### Logs\n\n_No response_",[2076,2079],{"name":2077,"color":2078},"3.x","29bc7f",{"name":2080,"color":2081},"pending triage","E99695",12540,"Bug in Docs Module Overview","2023-01-19T16:06:44Z","https://github.com/nuxt/nuxt/issues/12540",0.72158575,{"description":2088,"labels":2089,"number":2093,"owner":1994,"repository":1995,"state":2008,"title":2094,"updated_at":2095,"url":2096,"score":2097},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.12.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8, @pinia/nuxt@0.7.0, @nuxt/image@1.8.1, @vueuse/nuxt@11.2.0, nuxt-gtag@3.0.1, @nuxt/eslint@0.6.1, @nuxtjs/leaflet@1.2.4\n- Build Modules: -\n------------------------------\n\n### Version\n\nv3.0.0-alpha.8\n\n### Reproduction\n\nhttps://github.com/tobychidi/nuxt-nitro-api-reprod\n\nThis a simpler project but the same thing happens. \n\n### Description\n\n ```\nWARN [vite:css] Lexical error on line 1: Unrecognized text. 7:22:01 AM\n\n Erroneous area:\n1: infinity * 1px\n^..^\n3009| &::after {\n3010| content: var(--tw-content);\n3011| border-radius: calc(infinity * 1px);\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n3012| }\n3013| }\n```\n\nAlso:\n```\n[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help\n```\n\nThis error happens, even on Netlify where I deploy and the build does not finish. \n\n\n\n\nIt gets to the end but never finishes until timeout.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2090,2091,2092],{"name":1985,"color":1986},{"name":1988,"color":1989},{"name":2029,"color":2030},2589,"Build Error in v3","2024-11-10T18:55:55Z","https://github.com/nuxt/ui/issues/2589",0.7231887,{"description":2099,"labels":2100,"number":2105,"owner":1994,"repository":1995,"state":2008,"title":2106,"updated_at":2107,"url":2108,"score":2109},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn my Nuxt 3 project (that uses Nuxt UI `v3.0.0-alpha9`), I have a Vue component like this:\n\n```vue\n\u003Cscript setup lang=\"ts\">\n...\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"section\">\n ...\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cstyle scoped lang=\"scss\">\n@use \"tailwindcss\";\n\n.section + .section {\n @apply mt-8 lg:mt-12;\n}\n\u003C/style>\n```\n\nThe problem is that `@apply mt-8 lg:mt-12;` doesn't work unless I add this to my `nuxt.config.ts`:\n```\npostcss: {\n plugins: {\n \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n },\n},\n```\n\nHowever, when I do this, the Nuxt UI components stop working properly (e.g., Slideover renders at the bottom of the page and with wrong styling). How can I make the `@apply ...` work without breaking the Nuxt UI components?\n\nThis is my `package.json`:\n```json\n{\n \"name\": \"frontend\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"postinstall\": \"husky install && nuxt prepare\",\n \"dev\": \"nuxt dev\",\n \"build\": \"nuxt build\",\n \"preview\": \"nuxt preview\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.9\",\n \"nuxt\": \"latest\",\n \"nuxt-svgo\": \"latest\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"latest\",\n \"@commitlint/config-conventional\": \"latest\",\n \"husky\": \"latest\",\n \"sass\": \"latest\"\n }\n}\n```\n\nThis is my `nuxt.config.ts`:\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: \"2024-04-03\",\n devtools: { enabled: false },\n modules: [\"@nuxt/ui\", \"nuxt-svgo\"],\n css: [\"@/assets/css/main.css\"],\n // postcss: {\n // plugins: {\n // \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n // },\n // },\n appConfig: {\n // https://ui3.nuxt.dev/getting-started/theme#colors\n ui: {\n colors: {\n primary: \"primary\", // Defined in `assets/css/theme.css`\n secondary: \"secondary\", // Defined in `assets/css/theme.css`\n },\n },\n },\n});\n```\n\nThis is my `assets/main.css`:\n```css\n/* https://ui3.nuxt.dev/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css */\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```",[2101,2104],{"name":2102,"color":2103},"question","d876e3",{"name":1988,"color":1989},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.7232925,["Reactive",2111],{},["Set"],["ShallowReactive",2114],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"0adeEdZZaqPvuVd8kBCffOXCaLtslQXb52H332DB9HE":-1},"/nuxt/ui/2951"]