\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_",[2920,2921,2924],{"name":2866,"color":2885},{"name":2922,"color":2923},"v3","49DCB8",{"name":2887,"color":2888},3631,"Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.7347897,{"description":2931,"labels":2932,"number":2934,"owner":2875,"repository":2890,"state":2912,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Description\r\n\r\nMost of the time when I work with forms, I have some sort of state object like so:\r\n```ts\r\nconst state = ref({\r\n name: '',\r\n email: '',\r\n company: null,\r\n title: null,\r\n});\r\n```\r\nWhen a user changes the value in the input, the value will never be `null` again (even if they delete their input).\r\nCurrently, the solution is doing null coercion in e.g. a `useFetch` function:\r\n```ts\r\n// code snippet only for illustration\r\nconst { data } = await useFetch('/api/some/endpoint', {\r\n method: 'POST',\r\n body: {\r\n name: state.value.name,\r\n email: state.value.email,\r\n company: state.value.company ?? null,\r\n title: state.value.title ?? null,\r\n },\r\n});\r\n```\r\nThis requires spreading and/or overriding values independently.\r\nSay you have some kind of dashboard application with many forms (my case), then you have to do this for every form that has \"optional\" inputs.\r\n\r\nWhat you actually want is:\r\n```ts\r\nconst { data } = await useFetch('/api/some/endpoint', {\r\n method: 'POST',\r\n body: state,\r\n});\r\n```\r\nWhere the input returns `null` if it contains an empty string.\r\nThis can be done by adding a model modifier:\r\n```vue\r\n\u003CUInput v-model.nullify=\"state.company\" />\r\n```\r\nJust like `trim` and `number` trims the value or coerces to a number respectively.\r\n\r\n### Additional context\r\n\r\nThis PR depends on allowing `null` as initial value as implemented in (#2275)",[2933],{"name":2866,"color":2885},2281,"Input/Textarea nullify modifier","2024-10-23T20:24:45Z","https://github.com/nuxt/ui/issues/2281",0.738848,{"description":2940,"labels":2941,"number":2946,"owner":2875,"repository":2890,"state":2912,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### 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```",[2942,2945],{"name":2943,"color":2944},"question","d876e3",{"name":2922,"color":2923},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.73958755,{"description":2952,"labels":2953,"number":2960,"owner":2875,"repository":2875,"state":2912,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Version\n\n[v1.4.0](https://github.com/nuxt/nuxt.js/releases/tag/v1.4.0)\n\n### Reproduction link\n\n[https://www.e-lens.com.br/](https://www.e-lens.com.br/)\n\n### Steps to reproduce\n\nOpen in chrome 41\n\n\n\n### What is expected ?\n\nSolution\n\n### What is actually happening?\n\nBroken in chrome 41, it's same version which google use to crawler\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c6858\">#c6858\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2954,2957],{"name":2955,"color":2956},"pending triage","E99695",{"name":2958,"color":2959},"2.x","d4c5f9",3199,"Broken in chrome 41","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/3199",0.7412058,{"description":2966,"labels":2967,"number":2973,"owner":2875,"repository":2890,"state":2912,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### 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```",[2968,2971,2972],{"name":2969,"color":2970},"bug","d73a4a",{"name":2922,"color":2923},{"name":2887,"color":2888},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7460914,{"description":2979,"labels":2980,"number":2982,"owner":2875,"repository":2890,"state":2912,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.15.1\r\n- Nuxt Version: 3.13.2\r\n- CLI Version: 3.13.2\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.9\r\n- Builder: -\r\n- User Config: app, colorMode, compatibilityDate, css, devServer, devtools, i18n, modules, openFetch, runtimeConfig, ssr, tailwindcss\r\n- Runtime Modules: @nuxt/ui@2.18.0, @pinia/nuxt@0.5.1, nuxt-icons@3.2.1, @nuxtjs/i18n@8.5.3, nuxt-open-fetch@0.9.1\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv.2.18.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-k1f28x?file=app.config.ts\r\n\r\n### Description\r\n\r\nSince updating the library to version 2.18.0, custom variants defined in the app.config.ts are no longer recognized by TypeScript, resulting in type errors when using these custom variants in the code.\r\n\r\nSteps to reproduce:\r\n\r\n1. Define a custom variant in app.config.ts\r\n2. Observe TypeScript type errors indicating the variant is not recognized when using it to custom another button ( in app.config.ts )\r\n\r\nExpected behavior: Custom variants should be properly recognized and validated by TypeScript, as they were in versions prior to 2.18.0.\r\n\r\nThank you for your help in resolving this issue!\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2981],{"name":2969,"color":2970},2221,"Custom variants not recognized by TypeScript in app.config.ts after updating to v2.18.0","2024-11-26T13:14:03Z","https://github.com/nuxt/ui/issues/2221",0.74767023,["Reactive",2988],{},["Set"],["ShallowReactive",2991],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fBwrcDDl5HUFJYca4joMuadHX1EzUI15Wq6SAu8mtv80":-1},"/nuxt/nuxt.com/1783"]