\n\u003C/template>\n\u003Cscript setup>\nconst items = [\n { label: \"click for one\", onClick: () => alert(\"1\"), to: \"/one\" },\n { label: \"click for two\", onClick: () => alert(\"2\"), to: \"/two\" },\n]\n\u003C/script>\n```\n\nMy need is to have some secondary effects happening besides the navigation when the user clicks on a breadcrumb item.\n\n### Additional context\n\n_No response_",[3030,3033,3036],{"name":3031,"color":3032},"enhancement","a2eeef",{"name":3034,"color":3035},"v3","49DCB8",{"name":3037,"color":3038},"triage","ffffff",3631,"ui","closed","Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.65952295,{"description":3047,"labels":3048,"number":3053,"owner":3020,"repository":3040,"state":3041,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### 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```",[3049,3052],{"name":3050,"color":3051},"question","d876e3",{"name":3034,"color":3035},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.6601499,{"description":3059,"labels":3060,"number":3065,"owner":3020,"repository":3040,"state":3041,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\n- \n\n### Description\n\nUpgraded all deps to the latest and bam Nuxt 3.16.0 is added. We get errors now as Nuxt UI 3 still ships with\n\n`'@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))\n`\n\nAs of Nuxt 3.16.0 ships with @unhead2:\nhttps://nuxt.com/blog/v3-16#unhead-v2\n\nActual error:\n`[@nuxt/scripts 9:42:20 PM] ERROR Nuxt Scripts requires Unhead >= 2, you are using v1.11.20. Please run nuxi upgrade --clean to upgrade...`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3061,3064],{"name":3062,"color":3063},"bug","d73a4a",{"name":3034,"color":3035},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.6636012,{"description":3071,"labels":3072,"number":3074,"owner":3020,"repository":3040,"state":3041,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nThank you in advance for your help!\n\nWe’re using Nuxt UI Pro for styling in our application, which primarily uses a language other than English. When working with the `SelectMenu` component and enabling the `multiple` prop, the displayed value shows \"1 selected\" (or similar text like \"{x-number} selected\"). Instead, we’d like to display the actual selected value(s) of the SelectMenu, like when NOT using the `multiple` prop, if just one item is selected. And any more than that, we need to display the \"{x-number} selected\" it in our language, not English.\n\nDo I need to create a custom wrapper component for this, or is there a simpler way to customize the displayed text? I’m not that deep on frontend development and manipulating package classes in Nuxt 3, so I’d appreciate guidance on how to approach this issue.\n\nI’ve reviewed the source code here: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue but couldn’t figure out how to achieve this.\n\nI see the code where the const for the label is generated, but whats the best approach to change that for us?\n\n```\n const label = computed(() => {\n if (!props.modelValue) return null\n\n if (Array.isArray(props.modelValue) && props.modelValue.length) {\n return `${props.modelValue.length} selected`\n } else if (['string', 'number'].includes(typeof props.modelValue)) {\n return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue\n }\n\n return accessor(props.modelValue as Record\u003Cstring, any>, props.optionAttribute)\n })\n```\n\nAny advice or direction would be greatly appreciated!",[3073],{"name":3050,"color":3051},2867,"How can I change the \u003CUSelectMenu> to display the value of a selected item, instead of \"1 selected\" when adding the multiple prop","2024-12-09T11:50:53Z","https://github.com/nuxt/ui/issues/2867",0.66431016,{"description":3080,"labels":3081,"number":3084,"owner":3020,"repository":3040,"state":3041,"title":3085,"updated_at":3086,"url":3087,"score":3088},"### Description\n\nThe Nuxt UI v2 dropdown has the option to open on hover or click. In v3 the only option available is click. \n\n\n\n### Additional context\n\n_No response_",[3082,3083],{"name":3031,"color":3032},{"name":3034,"color":3035},3322,"[DropdownMenu] (v3) missing mode prop for hover/click","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3322",0.68976516,{"description":3090,"labels":3091,"number":3094,"owner":3020,"repository":3040,"state":3041,"title":3095,"updated_at":3096,"url":3097,"score":3098},"### Environment\n\nmodal.close() dont work,and cant get formref\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.10\n\n### Reproduction\n\nmodal.close() dont work\n\n### Description\n\nmodal.close() dont work,and cant get formref\n\n### Additional context\n\nmodal.close() dont work,and cant get formref\n\n### Logs\n\n```shell-script\nmodal.close() dont work,and cant get formref\n```",[3092,3093],{"name":3062,"color":3063},{"name":3034,"color":3035},2894,"modal.close() dont work,and cant get formref","2025-01-25T13:12:30Z","https://github.com/nuxt/ui/issues/2894",0.69043577,{"description":3100,"labels":3101,"number":3111,"owner":3020,"repository":3020,"state":3041,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v14.18.2`\r\n- Nuxt Version: `3.1.1`\r\n- Nitro Version: `2.1.0`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `vite`, `components`, `modules`, `image`, `css`, `build`, `app`, `runtimeConfig`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.3.0`, `@nuxt/image-edge@1.0.0-27913696.5d122a3`, `@nuxtjs/robots@3.0.0`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n\r\n### Reproduction\r\n\r\nThe application runs okay locally and CSS is fine. \r\nAfter I run ```yarn build``` and the app is bundled for production, inline css in the template is not applied. \r\n\r\n**nuxt.config.js**\r\n```\r\n/* eslint-disable @typescript-eslint/ban-ts-comment */\r\nimport eslintPlugin from 'vite-plugin-eslint'\r\nimport { config } from './config'\r\n\r\nconst appEnv = process.env.ENV || 'development'\r\n\r\n// https://v3.nuxtjs.org/api/configuration/nuxt.config\r\nexport default {\r\n vite: {\r\n // @ts-ignore,\r\n plugins: [eslintPlugin()]\r\n },\r\n components: {\r\n global: true,\r\n dirs: ['~/components/atoms', '~/components/molecules', '~/components/organisms', '~/components/storyblok']\r\n },\r\n modules: ['@nuxtjs/tailwindcss', '@nuxt/image-edge', '@nuxtjs/robots'],\r\n image: {\r\n provider: 'storyblok',\r\n storyblok: { baseURL: 'https://a.storyblok.com' },\r\n screens: {\r\n xs: 375,\r\n sm: 576,\r\n md: 768,\r\n lg: 992,\r\n xl: 1201,\r\n xxl: 1401,\r\n hd: 1920\r\n }\r\n },\r\n css: ['~/assets/css/main.scss', '~/assets/fonts/redHatText.css', '~/assets/fonts/redHatDisplay.css'],\r\n build: {\r\n loaders: {\r\n scss: {\r\n implementation: require('sass')\r\n },\r\n postcss: {\r\n plugins: {\r\n tailwindcss: {},\r\n autoprefixer: {}\r\n }\r\n }\r\n }\r\n },\r\n app: {\r\n head: {\r\n title: 'BeeIT',\r\n meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],\r\n link: [{ rel: 'shortcut icon', type: 'image/png', href: 'https://a.storyblok.com/f/155755/32x32/d6965832e1/favicon-32x32.png' }],\r\n htmlAttrs: {\r\n lang: 'en'\r\n }\r\n }\r\n },\r\n runtimeConfig: {\r\n server: config[appEnv].server,\r\n public: config[appEnv].client\r\n }\r\n}\r\n\r\n```\r\n\r\n\r\n**vite.config.js**\r\n\r\n```\r\nimport { defineConfig } from 'vite'\r\n\r\nexport default defineConfig({\r\n appType: 'custom',\r\n server: { middlewareMode: 'ssr' },\r\n build: {\r\n ssr: true,\r\n manifest: true,\r\n copyPublicDir: true,\r\n cssCodeSplit: true,\r\n sourcemap: true,\r\n minify: false\r\n }\r\n})\r\n\r\n```\r\n\r\n**nitro.config.js**\r\n```\r\nimport { defineNitroConfig } from 'nitropack'\r\n\r\nexport default defineNitroConfig({\r\n preset: 'aws-lambda',\r\n serveStatic: true\r\n})\r\n\r\n```\r\n\r\n\r\n**tailwind.config.js - content part**\r\n\r\n```\r\ncontent: ['./components/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}'],\r\n```\r\n\r\n### Describe the bug\r\n\r\nThe application runs okay locally and CSS is fine. \r\nAfter I run ```yarn build``` and the app is bundled for production, inline css in the template is not applied. \r\nCSS that is in .scss files and in \u003Cstyle> is applied.\r\n\r\n\r\n\r\nAlso this error is \r\n\r\ndisplayed in console.\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_",[3102,3105,3108],{"name":3103,"color":3104},"3.x","29bc7f",{"name":3106,"color":3107},"pending triage","E99695",{"name":3109,"color":3110},"needs reproduction","FBCA04",18575,"Css inline classes in template are not applied","2023-02-01T17:43:29Z","https://github.com/nuxt/nuxt/issues/18575",0.69955415,{"description":3117,"labels":3118,"number":3119,"owner":3020,"repository":3021,"state":3041,"title":3120,"updated_at":3121,"url":3122,"score":3123},"I have this kind of template:\n```\n \u003Cspan>\n \u003CIcon\n v-show=\"!searching\"\n name=\"i-heroicons-magnifying-glass-20-solid\" />\n \u003CIcon\n v-show=\"searching\"\n name=\"i-heroicons-arrow-path-20-solid\"\n class=\"animate-spin\"\n />\u003C/span>\n```\n\nSo, it should show `magnifying-glass` when not searching and `arrow-path` when searching. This does not work. Depending on if the view was loaded during navigation or page load it does not change or there a both. With `v-if` it works fine.\n\nHere is a reproduction with `nuxt-ui`:\nhttps://stackblitz.com/edit/nuxt-ui-7zcwsg?file=app.vue,package.json\n\nAnd here is a reproduction from `nuxt-icon-playground`:\nhttps://stackblitz.com/edit/nuxt-icon-playground-odkjmz?file=app.vue,package.json\n\nIt works with 1.7.6 but not 1.8.0 onwards. Could this be related to #300 ?\n\n---\n```\n❯ npx nuxt info\nWorking directory: /home/projects/nuxt-ui \nNuxt project info: \n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2\n- Build Modules: -\n------------------------------\n```\n",[],301,"Issue with v-show on icons in 1.8.1 or 1.8.0","2024-11-20T15:03:29Z","https://github.com/nuxt/icon/issues/301",0.7030296,{"description":3125,"labels":3126,"number":3130,"owner":3020,"repository":3040,"state":3041,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### Description\n\nThe [documentation](https://ui.nuxt.com/components/date-picker) uses v-calendar as an example to create a date picker component. However, v-calendar is likely abandoned and will no longer be maintained (see https://github.com/nathanreyes/v-calendar/issues/1503 ) . Latest release was over a year ago.\n\nAlso, it has a dependency on a vulnerable lodash version ( see https://github.com/nathanreyes/v-calendar/issues/1420 ).\n\nWhat other alternatives are you planning on using in your documentation, or are there any other examples using a different library?\n\nThanks.",[3127,3128],{"name":3050,"color":3051},{"name":3129,"color":3038},"wontfix-v2",3239,"DatePicker documentation uses library that's no longer maintained","2025-02-04T20:40:38Z","https://github.com/nuxt/ui/issues/3239",0.7050317,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fx8HFiDtDovZ87tauwVt9_8PkRIoixYq-HnE0QIukwqw":-1},"/nuxt/ui/3370"]