\n\n\u003C!-- if we want to hide, we can let slot do the work, or maybe consider adding a properties to hide it. It's more shorter -->\n\u003CUInput type=\"password\">\n \u003Ctemplate #trailing>\u003C/template>\n\u003C/UInput>\n\n\u003C!-- compared to what we must do now as the documentation say -->\n\u003Ctemplate>\n \u003CUInput\n v-model=\"password\"\n placeholder=\"Password\"\n :type=\"show ? 'text' : 'password'\"\n :ui=\"{ trailing: 'pe-1' }\"\n >\n \u003Ctemplate #trailing>\n \u003CUButton\n color=\"neutral\"\n variant=\"link\"\n size=\"sm\"\n :icon=\"show ? 'i-lucide-eye-off' : 'i-lucide-eye'\"\n aria-label=\"show ? 'Hide password' : 'Show password'\"\n :aria-pressed=\"show\"\n aria-controls=\"password\"\n @click=\"show = !show\"\n />\n \u003C/template>\n \u003C/UInput>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst show = ref(false)\nconst password = ref('password')\n\u003C/script>\n```",[2882,2885],{"name":2883,"color":2884},"enhancement","a2eeef",{"name":2869,"color":2870},2806,"input: add toggle password button automatically for type password","2024-12-02T17:21:42Z","https://github.com/nuxt/ui/issues/2806",0.722522,{"description":2892,"labels":2893,"number":2898,"owner":2872,"repository":2873,"state":2874,"title":2899,"updated_at":2900,"url":2901,"score":2902},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nHello,\n\nHow to access [Neutral Palette](https://ui3.nuxt.dev/getting-started/theme#neutral-palette) classes ? (text-ui-dimmed, bg-ui-accented ...)\nTailwind CSS IntelliSense doesn't offer them, are they generated by default?\nIf not, What is the easiest way to do this?\n\nThanks in advance",[2894,2897],{"name":2895,"color":2896},"question","d876e3",{"name":2869,"color":2870},2843,"Neutral Palette classes","2024-12-09T11:12:10Z","https://github.com/nuxt/ui/issues/2843",0.73148555,{"description":2904,"labels":2905,"number":2910,"owner":2872,"repository":2873,"state":2874,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.12.0\n- Nuxt Version: 3.15.0\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/devtools@1.6.4, @nuxt/ui@2.20.0, @vueuse/nuxt@12.2.0, @vueuse/motion/nuxt@2.2.6, @nuxtjs/device@3.2.4, @nuxt/image@1.8.1, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @vite-pwa/nuxt@0.10.6, nuxt-snackbar@1.1.2, nuxt-gtag@3.0.2, @nuxt/eslint@0.7.4\n- Build Modules: -\n------------------------------\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n no reproduction\n\n### Description\n\nI notice there's a syntax error in the code;\nThe error is coming from a syntax error in the Headless UI Vue component code. Specifically, there's an unexpected semicolon in this line: \n(0,;__vite_ssr_import_5__.match)(i.value,{\nThis appears to be a build/compilation issue with the Headless UI Vue component. Let me check if there are any Headless UI Vue dependencies in the package.json.\n\nThe error appears when using nuxt v3.15.0 \nWith the previous \"nuxt\": \"3.14.1592\", no error. I 'm not sure if i should fill the bug Report here or in Nuxt directly!\n\n\n### Additional context\n\nUnexpected token ';'\n\n function g(e=\"\"){return e.split(/\\s+/).filter(t=>t.length>1)}let R=Symbol(\"TransitionContext\");var pe=(a=>(a.Visible=\"visible\",a.Hidden=\"hidden\",a))(pe||{});function me(){return (0,__vite_ssr_import_0__.inject)(R,null)!==null}function Te(){let e=(0,__vite_ssr_import_0__.inject)(R,null);if(e===null)throw new Error(\"A \u003CTransitionChild /> is used but it is missing a parent \u003CTransitionRoot />.\");return e}function ge(){let e=(0,__vite_ssr_import_0__.inject)(N,null);if(e===null)throw new Error(\"A \u003CTransitionChild /> is used but it is missing a parent \u003CTransitionRoot />.\");return e}let N=Symbol(\"NestingContext\");function L(e){return\"children\"in e?L(e.children):e.value.filter(({state:t})=>t===\"visible\").length>0}function Q(e){let t=(0,__vite_ssr_import_0__.ref)([]),a=(0,__vite_ssr_import_0__.ref)(!1);(0,__vite_ssr_import_0__.onMounted)(()=>a.value=!0),(0,__vite_ssr_import_0__.onUnmounted)(()=>a.value=!1);function s(n,r=__vite_ssr_import_6__.RenderStrategy.Hidden){let l=t.value.findIndex(({id:f})=>f===n);l!==-1&&((0,__vite_ssr_import_5__.match)(r,{[__vite_ssr_import_6__.RenderStrategy.Unmount](){t.value.splice(l,1)},[__vite_ssr_import_6__.RenderStrategy.Hidden](){t.value[l].state=\"hidden\"}}),!L(t)&&a.value&&(e==null||e()))}function h(n){let r=t.value.find(({id:l})=>l===n);return r?r.state!==\"visible\"&&(r.state=\"visible\"):t.value.push({id:n,state:\"visible\"}),()=>s(n,__vite_ssr_import_6__.RenderStrategy.Unmount)}return{children:t,register:h,unregister:s}}let W=__vite_ssr_import_6__.Features.RenderStrategy,he=(0,__vite_ssr_import_0__.defineComponent)({props:{as:{type:[Object,String],default:\"div\"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:\"\"},enterFrom:{type:[String],default:\"\"},enterTo:{type:[String],default:\"\"},entered:{type:[String],default:\"\"},leave:{type:[String],default:\"\"},leaveFrom:{type:[String],default:\"\"},leaveTo:{type:[String],default:\"\"}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s,expose:h}){let n=(0,__vite_ssr_import_0__.ref)(0);function r(){n.value|=__vite_ssr_import_2__.State.Opening,t(\"beforeEnter\")}function l(){n.value&=~__vite_ssr_import_2__.State.Opening,t(\"afterEnter\")}function f(){n.value|=__vite_ssr_import_2__.State.Closing,t(\"beforeLeave\")}function S(){n.value&=~__vite_ssr_import_2__.State.Closing,t(\"afterLeave\")}if(!me()&&(0,__vite_ssr_import_2__.hasOpenClosed)())return()=>(0,__vite_ssr_import_0__.h)(Se,{...e,onBeforeEnter:r,onAfterEnter:l,onBeforeLeave:f,onAfterLeave:S},s);let d=(0,__vite_ssr_import_0__.ref)(null),y=(0,__vite_ssr_import_0__.computed)(()=>e.unmount?__vite_ssr_import_6__.RenderStrategy.Unmount:__vite_ssr_import_6__.RenderStrategy.Hidden);h({el:d,$el:d});let{show:v,appear:A}=Te(),{register:D,unregister:H}=ge(),i=(0,__vite_ssr_import_0__.ref)(v.value?\"visible\":\"hidden\"),I={value:!0},c=(0,__vite_ssr_import_1__.useId)(),b={value:!1},P=Q(()=>{!b.value&&i.value!==\"hidden\"&&(i.value=\"hidden\",H(c),S())});(0,__vite_ssr_import_0__.onMounted)(()=>{let o=D(c);(0,__vite_ssr_import_0__.onUnmounted)(o)}),(0,__vite_ssr_import_0__.watchEffect)(()=>{if(y.value===__vite_ssr_import_6__.RenderStrategy.Hidden&&c){if(v.value&&i.value!==\"visible\"){i.value=\"visible\";return}(0,;__vite_ssr_import_5__.match)(i.value,{[\"hidden\"]:()=>H(c),[\"visible\"]:()=>D(c)})}});let j=g(e.enter),M=g(e.enterFrom),X=g(e.enterTo),_=g(e.entered),Y=g(e.leave),Z=g(e.leaveFrom),ee=g(e.leaveTo);(0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watchEffect)(()=>{if(i.value===\"visible\"){let o=(0,__vite_ssr_import_3__.dom)(d);if(o instanceof Comment&&o.data===\"\")throw new Error(\"Did you forget to passthrough the ref to the actual DOM node?\")}})});function te(o){let E=I.value&&!A.value,p=(0,__vite_ssr_import_3__.dom)(d);!p||!(p instanceof HTMLElement)||E||(b.value=!0,v.value&&r(),v.value||f(),o(v.value?(0,__vite_ssr_import_7__.transition)(p,j,M,X,_,V=>{b.value=!1,V===__vite_ssr_import_7__.Reason.Finished&&l()}):(0,__vite_ssr_import_7__.transition)(p,Y,Z,ee,_,V=>{b.value=!1,V===__vite_ssr_import_7__.Reason.Finished&&(L(P)||(i.value=\"hidden\",H(c),S()))})))}return (0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watch)([v],(o,E,p)=>{te(p),I.value=!1},{immediate:!0})}),(0,__vite_ssr_import_0__.provide)(N,P),(0,__vite_ssr_import_2__.useOpenClosedProvider)((0,__vite_ssr_import_0__.computed)(()=>(0,__vite_ssr_import_5__.match)(i.value,{[\"visible\"]:__vite_ssr_import_2__.State.Open,[\"hidden\"]:__vite_ssr_import_2__.State.Closed})|n.value)),()=>{let{appear:o,show:E,enter:p,enterFrom:V,enterTo:Ce,entered:ye,leave:be,leaveFrom:Ee,leaveTo:Ve,...U}=e,ne={ref:d},re={...U,...A.value&&v.value&&__vite_ssr_import_4__.env.isServer?{class:(0,__vite_ssr_import_0__.normalizeClass)([a.class,U.class,...j,...M])}:{}};return (0,__vite_ssr_import_6__.render)({theirProps:re,ourProps:ne,slot:{},slots:s,attrs:a,features:W,visible:i.value===\"visible\",name:\"TransitionChild\"})}}}),ce=he,Se=(0,__vite_ssr_import_0__.defineComponent)({inheritAttrs:!1,props:{as:{type:[Object,String],default:\"div\"},show:{type:[Boolean],default:null},unmount:{type:[Boolean],default:!0},appear:{type:[Boolean],default:!1},enter:{type:[String],default:\"\"},enterFrom:{type:[String],default:\"\"},enterTo:{type:[String],default:\"\"},entered:{type:[String],default:\"\"},leave:{type:[String],default:\"\"},leaveFrom:{type:[String],default:\"\"},leaveTo:{type:[String],default:\"\"}},emits:{beforeEnter:()=>!0,afterEnter:()=>!0,beforeLeave:()=>!0,afterLeave:()=>!0},setup(e,{emit:t,attrs:a,slots:s}){let h=(0,__vite_ssr_import_2__.useOpenClosed)(),n=(0,__vite_ssr_import_0__.computed)(()=>e.show===null&&h!==null?(h.value&__vite_ssr_import_2__.State.Open)===__vite_ssr_import_2__.State.Open:e.show);(0,__vite_ssr_import_0__.watchEffect)(()=>{if(![!0,!1].includes(n.value))throw new Error('A \u003CTransition /> is used but it is missing a :show=\"true | false\" prop.')});let r=(0,__vite_ssr_import_0__.ref)(n.value?\"visible\":\"hidden\"),l=Q(()=>{r.value=\"hidden\"}),f=(0,__vite_ssr_import_0__.ref)(!0),S={show:n,appear:(0,__vite_ssr_import_0__.computed)(()=>e.appear||!f.value)};return (0,__vite_ssr_import_0__.onMounted)(()=>{(0,__vite_ssr_import_0__.watchEffect)(()=>{f.value=!1,n.value?r.value=\"visible\":L(l)||(r.value=\"hidden\")})}),(0,__vite_ssr_import_0__.provide)(N,l),(0,__vite_ssr_import_0__.provide)(R,S),()=>{let d=(0,__vite_ssr_import_6__.omit)(e,[\"show\",\"appear\",\"unmount\",\"onBeforeEnter\",\"onBeforeLeave\",\"onAfterEnter\",\"onAfterLeave\"]),y={unmount:e.unmount};return (0,__vite_ssr_import_6__.render)({ourProps:{...y,as:\"template\"},theirProps:{},slot:{},slots:{...s,default:()=>[(0,__vite_ssr_import_0__.h)(ce,{onBeforeEnter:()=>t(\"beforeEnter\"),onAfterEnter:()=>t(\"afterEnter\"),onBeforeLeave:()=>t(\"beforeLeave\"),onAfterLeave:()=>t(\"afterLeave\"),...a,...y,...d},s.default)]},attrs:{},features:W,visible:r.value===\"visible\",name:\"Transition\"})}}});\n\n\n SyntaxError: Unexpected token ';'\n at new Script (node:vm:116:7)\n at createScript (node:vm:268:10)\n at Object.runInThisContext (node:vm:316:10)\n at ViteNodeRunner.runModule (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:398:19)\n at ViteNodeRunner.directRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:381:16) \n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async ViteNodeRunner.cachedRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:206:14) \n at async ViteNodeRunner.dependencyRequest (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:259:12)\n at async node_modules\\@headlessui\\vue\\dist\\headlessui.esm.js:23:32\n at async ViteNodeRunner.runModule (/D:/Dev/maideo/maideo-maid/node_modules/vite-node/dist/client.mjs:399:5) \n\n### Logs\n\n```shell-script\n\n```",[2906,2907],{"name":2866,"color":2867},{"name":2908,"color":2909},"duplicate","cfd3d7",2972,"Syntax error in the Headless UI Vue component code","2024-12-25T10:39:30Z","https://github.com/nuxt/ui/issues/2972",0.7352014,{"description":2916,"labels":2917,"number":2923,"owner":2872,"repository":2873,"state":2874,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Description\n\nHello there! thank you all for this awesome library! I'm using the pro version to leverage the Dashboard components, which have been very useful so far, but I'm currently in need of something like this:\n\n\n\nThe idea is to have a NavBar on top of all DashboardPanels across all pages. As far as I can understand the documentation, both DashboardNavbar and DashboardToolbar can only be used inside of a DashboardPanel, but would it be possible to somehow achieve this without breaking the way that the Dashboard components interact with each other? \n\nIn version 2 I kinda went around by just nesting a DashboardPanel inside of a main one (Placed in the layout file) which the Navbar inside it, and then I placed the `\u003Cslot />` for the rest of the content, which could be either 1 or more DashboardPanels.\n\nThanks in advance!",[2918,2919,2920],{"name":2895,"color":2896},{"name":2869,"color":2870},{"name":2921,"color":2922},"pro","5BD3CB",3627,"How to add a persistent Navbar on top of all DashboardPanels inside of a DashboardGroup?","2025-03-19T20:53:14Z","https://github.com/nuxt/ui/issues/3627",0.7381989,{"description":2929,"labels":2930,"number":2935,"owner":2872,"repository":2873,"state":2874,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Description\n\nHi,\r\n\r\nThe Icon component doesn't have a UI prop like most components. This prevent users from applying a CSS class to all instances of Icon. IMO, this is a really small harmless change, that would align Icons with the rest of the library.\r\n\r\nAs of v2.18.4, this is true for:\r\n- [ ] Form\r\n- [ ] Icon\r\n- [ ] Link\r\n\r\nAs a workaround, it's always possible to create a wrapper component.\r\n\r\n```vue\r\n\u003Cscript setup>\r\ndefineProps(['name', 'ui']);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cu-icon :name=\"name\" :class=\"ui.base\" />\r\n\u003C/template>\r\n``` \r\n\r\nBy the way, [the doc state](https://ui.nuxt.com/getting-started/theming#ui-prop) that \"Each component has a ui prop\". Which is not true then.\n\n### Additional context\n\n_No response_",[2931,2932],{"name":2883,"color":2884},{"name":2933,"color":2934},"triage","ffffff",2094,"Some component doesn't have a UI prop","2025-03-17T14:27:40Z","https://github.com/nuxt/ui/issues/2094",0.7385081,{"description":2941,"labels":2942,"number":2944,"owner":2872,"repository":2945,"state":2874,"title":2946,"updated_at":2947,"url":2948,"score":2949},"A few days ago, I installed version nuxt-ui:3.0.0-alpha.6, and when I tried to connect my provider as described in the Nuxt Fonts documentation, I encountered build errors. \n\nI conducted an experiment on a clean project and got the same result. Where is my mistake? Or is it a documentation mistake?\n\n\n\nnuxt.config.ts\n\n```\nexport default defineNuxtConfig({\n compatibilityDate: '2024-04-03',\n devtools: { enabled: true },\n modules: [\n '@nuxt/ui',\n ],\n fonts: {\n experimental: {\n // // Required for TailwindCSS v4. You can enable support for processing CSS variables for font family names. This may have a performance impact.\n processCSSVariables: true,\n },\n providers: {\n // You can pass a new custom provider - see more in the providers documentation\n // for what this file should look like\n custom: '~/providers/custom',\n },\n },\n})\n```\ncustom.ts\n\nimport { defineFontProvider } from 'unifont';\n\n```\nexport default defineFontProvider('custom', async (options) => {\n // do some setup\n return {\n async resolveFont (fontFamily, options) {\n \n if (fontFamily === 'TT Fors') {\n return {\n fonts: [\n {\n src: [\n { url: '//my-cdn.cloudfront.net/fonts/TTFors/TTFors-Medium.woff2', format: 'woff2' },\n ],\n weight: 500,\n style: 'normal',\n }\n ]\n }\n }\n }\n }\n })\n```\n\npackage.json\n\n```\n{\n \"name\": \"nuxt-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.6\",\n \"nuxt\": \"^3.13.0\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n }\n}\n```\n\n",[2943],{"name":2866,"color":2867},342,"fonts","Custom provider errors on nuxt-ui:3.0.0-alpha.6","2024-10-23T11:46:10Z","https://github.com/nuxt/fonts/issues/342",0.74003834,{"description":2951,"labels":2952,"number":2954,"owner":2872,"repository":2873,"state":2874,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Description\n\nWe have private modules using @nuxt/ui. \r\nTheir module setup uses nuxt.hook to add files to tailwindcss.config. \r\nwith... \r\n```\r\n// nuxt.config.ts\r\ntailwindcss: {\r\n exposeConfig: true,\r\n}\r\n```\r\nWe can see at runtime our private modules were included in the tailwind content.\r\nThis is also confirmed with logs during the build and nuxt.hook\r\n\r\nEverything works as expected when building locally...\r\n``` bash\r\nnpm run dev\r\n```\r\nor\r\n``` bash\r\nnuxt build\r\n```\r\nHowever when building for production the resulting client bundle is missing any style used in a module. \r\nin other words, anything from tailwindcss.content with `node_modules` in the path was skipped.\r\n\r\nMy modules tailwind styles don't work in production.\r\n\r\nHow can I debug this?",[2953],{"name":2895,"color":2896},2253,"Expected styles from a private modules are missing in the production client bundle","2024-12-09T11:19:56Z","https://github.com/nuxt/ui/issues/2253",0.74314743,{"description":2960,"labels":2961,"number":2965,"owner":2872,"repository":2873,"state":2874,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nCurrently I've defined a `Heading` component, that just styles based on some various props. It might be nice to have some unified way of styling all `h1`, `h2` etc. directly through available components.\n\n\n### Additional context\n\n_No response_",[2962,2963,2964],{"name":2866,"color":2867},{"name":2869,"color":2870},{"name":2921,"color":2922},2697,"Header/Text component(s)","2024-11-20T16:54:18Z","https://github.com/nuxt/ui/issues/2697",0.74420476,{"description":2971,"labels":2972,"number":2979,"owner":2872,"repository":2980,"state":2874,"title":2981,"updated_at":2982,"url":2983,"score":2984},"- Nuxt: 3.1.1\r\n- nuxt-vitest: 0.6.8\r\n\r\nI followed the documentation to test the library.\r\nI created a test file that mocks 'useStorage'.\r\nWhen I run the tests, I get an error:\r\n\r\n`Error: Cannot find import \"useStorage\" to mock`\r\n\r\nDo I need to configure anything else?\r\n\r\nHere is my example on Stackblitz:\\\r\nhttps://stackblitz.com/edit/nuxt-starter-dllgrr?file=tests%2Fmytest.nuxt.test.ts\r\n\r\nCould you provide an example that works on Stackblitz?",[2973,2976],{"name":2974,"color":2975},"documentation","0075ca",{"name":2977,"color":2978},"vitest-environment","b60205",506,"test-utils","Provide a simple working example from Stackblitz","2023-12-02T00:22:10Z","https://github.com/nuxt/test-utils/issues/506",0.7444715,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuNBpk3mBGGINLkiKe9nofUv2fuel65SBLVE7DmEWmnY":-1},"/nuxt/ui/3788"]