\n \u003CUButton\n @click=\"add\">Add\n \u003C/UButton>\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\nAfter click the \"add\" button, it will push a new data into dataRef, but the Table will not rendering new data\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3157,3158,3159],{"name":3133,"color":3134},{"name":3136,"color":3137},{"name":3160,"color":3161},"v3","49DCB8",3597,"UTable data updated but UI will not update","2025-03-24T02:11:33Z","https://github.com/nuxt/ui/issues/3597",0.7179769,{"description":3168,"labels":3169,"number":3174,"owner":3139,"repository":3140,"state":3141,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Description\n\nHow do I override e.g. `ui.modal.variants.fullscreen.false` styles for just one element?",[3170,3173],{"name":3171,"color":3172},"question","d876e3",{"name":3160,"color":3161},3704,"How to override variants for single components","2025-03-28T08:52:19Z","https://github.com/nuxt/ui/issues/3704",0.72798634,{"description":3180,"labels":3181,"number":3183,"owner":3139,"repository":3140,"state":3141,"title":3184,"updated_at":3185,"url":3186,"score":3187},"Currently, portal components (modals, popovers, etc.) are directly attached to the root of the body. It would be beneficial to allow specifying their destination within the configuration .This would provide greater control over rendering order and potential styling conflicts, especially in complex applications with open shadow Dom. \n\nFor instance, a developer might want to render a modal within a specific container to inherit styles or avoid interference with other elements on the page (I currently using Nuxt ui as a web component withing WordPress). \n\nThe proposed configuration option could be a CSS selector string, allowing for flexible targeting of any existing element in the DOM defaulting to 'body'. ",[3182],{"name":3160,"color":3161},3687,"Allow specify portal destination for all portaled components","2025-04-21T15:42:56Z","https://github.com/nuxt/ui/issues/3687",0.73315024,{"description":3189,"labels":3190,"number":3198,"owner":3139,"repository":3140,"state":3141,"title":3199,"updated_at":3200,"url":3201,"score":3202},"### Description\n\n\n## 🔧 Current Behavior\n\nThe `deferInputValidation` parameter in `useFormField` is currently hardcoded in the `Input` component:\n\n```ts\nconst { emitFormBlur, emitFormInput, /* ... */ } = useFormField\u003CInputProps>(props, { \n deferInputValidation: false // Hardcoded\n})\n```\n\nThis limits flexibility, as consumers of the `Input` component cannot control validation timing behavior (e.g., validate on blur vs. validate on input).\n\n## ✅ Proposed Solution\n\nMake `deferInputValidation` configurable via a component prop:\n\n1. **Pass dynamic value to `useFormField`:**\n\n```ts\nuseFormField\u003CInputProps>(props, {\n deferInputValidation: props.deferInputValidation\n})\n```\n\n2. **Update the component props interface:**\n\n```ts\ndeferInputValidation?: boolean\n```\n\n---\n\n## 💡 Use Cases\n\n- **Delayed validation** for complex, interdependent form fields \n- **Immediate validation** for sensitive or critical fields \n- Flexibility for UX patterns like **\"validate-on-blur\"** or **\"validate-as-you-type\"**\n\n---\n\n## 🔁 Alternatives Considered\n\n- **Wrapper Component**: Adds unnecessary complexity \n- **Global Form-Level Config**: Less flexible than per-field control\n\n---\n\n## 🧪 Testing Impact\n\n- Covered by existing validation tests with both `true` and `false` cases\n\n---\n\n## 📚 Documentation\n\nRequires updates to:\n\n- Component prop API \n- Form validation best practices\n\n---\n\n## ⚙️ Why This Matters\n\nThis change supports **Inversion of Control** — empowering component consumers to control validation timing based on specific UX needs.\n```\n\n### Additional context\n\n_No response_",[3191,3194,3195],{"name":3192,"color":3193},"enhancement","a2eeef",{"name":3160,"color":3161},{"name":3196,"color":3197},"triage","ffffff",3810,"[UForm] Feature Request: Make deferInputValidation Configurable in useFormField","2025-04-20T15:25:42Z","https://github.com/nuxt/ui/issues/3810",0.7371877,{"description":3204,"labels":3205,"number":3208,"owner":3139,"repository":3140,"state":3141,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.15.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/eslint@0.6.0, @nuxtjs/prismic@3.4.3, @vueuse/nuxt@11.1.0, @nuxtjs/seo@2.0.0-rc.23, @nuxt/scripts@0.9.5, @formkit/nuxt@1.6.7, @nuxtjs/i18n@9.0.0-rc.2, @nuxt/ui@3.0.0-alpha.7\n- Build Modules: -\n\n### Version\n\n3.0.0-alpha.7\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-rufada?file=nuxt.config.ts\n\n### Description\n\nIt's seams that tailwind did not expose something named \"compile\" or, as Netlify Ai says, the build failure is caused by a syntax error related to a CommonJS module.\n\nI think that the problem was related to the way you import the `@tailwindcss/vite` plugin in line 77 of the `src/module.ts` but i don't understand if it's caused by the `await import()`. \n\nIn your project all work perfect after pnpm run prepare:dev. Maybe it's the way NPM (and not PNPM) installs the module? \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```\n ERROR Cannot start nuxt: The requested module 'tailwindcss' does not provide an export named 'compile' 4:27:03 PM\n\n var P=Object.defineProperty;var F=(e,t)=>{for(var s in t)P(e,s,{get:t[s],enumerable:!0})};import*as u from\"node:module\";import{pathToFileURL as X}from\"node:url\";var d={};F(d,{DEBUG:()=>T});var T=C(process.env.DEBUG);function C(e){if(e===void 0)return!1;if(e===\"true\"||e===\"1\")return!0;if(e===\"false\"||e===\"0\")return!1;if(e===\"*\")return!0;let t=e.split(\",\").map(s=>s.split(\":\")[0]);return t.includes(\"-tailwindcss\")?!1:!!t.includes(\"tailwindcss\")}import f from\"enhanced-resolve\";import{createJiti as U}from\"jiti\";import x from\"node:fs\";import J from\"node:fs/promises\";import y,{dirname as v}from\"node:path\";import{pathToFileURL as _}from\"node:url\";import{__unstable__loadDesignSystem as b,compile as W}from\"tailwindcss\";import m from\"node:fs/promises\";import a from\"node:path\";var $=[/import[\\s\\S]*?['\"](.{3,}?)['\"]/gi,/import[\\s\\S]*from[\\s\\S]*?['\"](.{3,}?)['\"]/gi,/export[\\s\\S]*from[\\s\\S]*?['\"](.{3,}?)['\"]/gi,/require\\(['\"](.+)['\"]\\)/gi],M=[\".js\",\".cjs\",\".mjs\"],N=[\"\",\".js\",\".cjs\",\".mjs\",\".ts\",\".cts\",\".mts\",\".jsx\",\".tsx\"],I=[\"\",\".ts\",\".cts\",\".mts\",\".tsx\",\".js\",\".cjs\",\".mjs\",\".jsx\"];async function O(e,t){for(let s of t){let r=${e}${s};if((await m.stat(r).catch(()=>null))?.isFile())return r}for(let s of t){let r=${e}/index${s};if(await m.access(r).then(()=>!0,()=>!1))return r}return null}async function p(e,t,s,r){let i=M.includes(r)?N:I,n=await O(a.resolve(s,t),i);if(n===null||e.has(n))return;e.add(n),s=a.dirname(n),r=a.extname(n);let o=await m.readFile(n,\"utf-8\"),l=[];for(let j of $)for(let c of o.matchAll(j))c[1].startsWith(\".\")&&l.push(p(e,c[1],s,r));await Promise.all(l)}async function g(e){let t=new Set;return await p(t,e,a.dirname(e),a.extname(e)),Array.from(t)}function B(e,{base:t,onDependency:s}){return W(e,{base:t,async loadModule(r,i){return R(r,i,s)},async loadStylesheet(r,i){return E(r,i,s)}})}async function L(e,{base:t}){return b(e,{base:t,async loadModule(s,r){return R(s,r,()=>{})},async loadStylesheet(s,r){return E(s,r,()=>{})}})}async function R(e,t,s){if(e[0]!==\".\"){let o=await S(e,t);if(!o)throw new Error(Could not resolve '${e}' from '${t}');let l=await h(_(o).href);return{base:v(o),module:l.default??l}}let r=await S(e,t);if(!r)throw new Error(Could not resolve '${e}' from '${t}');let[i,n]=await Promise.all([h(_(r).href+\"?id=\"+Date.now()),g(r)]);for(let o of n)s(o);return{base:v(r),module:i.default??i}}async function E(e,t,s){let r=await z(e,t);if(!r)throw new Error(Could not resolve '${e}' from '${t}');if(s(r),typeof globalThis.__tw_readFile==\"function\"){let n=await globalThis.__tw_readFile(r,\"utf-8\");if(n)return{base:y.dirname(r),content:n}}let i=await J.readFile(r,\"utf-8\");return{base:y.dirname(r),content:i}}var w=null;async function h(e){try{return await import(e)}catch{return w??=U(import.meta.url,{moduleCache:!1,fsCache:!1}),await w.import(e)}}var q=f.ResolverFactory.createResolver({fileSystem:new f.CachedInputFileSystem(x,4e3),useSyncFileSystemCalls:!0,extensions:[\".css\"],mainFields:[\"style\"],conditionNames:[\"style\"]});async function z(e,t){if(typeof globalThis.__tw_resolve==\"function\"){let s=globalThis.__tw_resolve(e,t);if(s)return Promise.resolve(s)}return D(q,e,t)}var A=f.ResolverFactory.createResolver({fileSystem:new f.CachedInputFileSystem(x,4e3),useSyncFileSystemCalls:!0,extensions:[\".js\",\".json\",\".node\",\".ts\"]});function S(e,t){return D(A,e,t)}function D(e,t,s){return new Promise((r,i)=>e.resolve({},s,t,{},(n,o)=>{if(n)return i(n);r(o)}))}function G(e,t){if(typeof e!=\"string\")throw new TypeError(\"expected path to be a string\");if(e===\"\\\\\"||e===\"/\")return\"/\";var s=e.length;if(s\u003C=1)return e;var r=\"\";if(s>4&&e[3]===\"\\\\\"){var i=e[2];(i===\"?\"||i===\".\")&&e.slice(0,2)===\"\\\\\\\\\"&&(e=e.slice(2),r=\"//\")}var n=e.split(/[/\\\\]+/);return t!==!1&&n[n.length-1]===\"\"&&n.pop(),r+n.join(\"/\")}function oe(e){let t=G(e);return e.startsWith(\"\\\\\\\\\")&&t.startsWith(\"/\")&&!t.startsWith(\"//\")?/${t}:t}if(!process.versions.bun){let e=u.createRequire(import.meta.url);u.register?.(X(e.resolve(\"@tailwindcss/node/esm-cache-loader\")))}export{L as __unstable__loadDesignSystem,B as compile,d as env,oe as normalizePath};\n ^^^^^^^\n SyntaxError: The requested module 'tailwindcss' does not provide an export named 'compile'\n\n at ModuleJob._instantiate (node:internal/modules/esm/module_job:146:21)\n at async ModuleJob.run (node:internal/modules/esm/module_job:229:5)\n at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)\n at async setup (/Users/lucabortolussi/Projects/v3%20-%20Smartness/node_modules/@nuxt/ui/dist/module.mjs:2788:22)\n at async normalizedModule (/Users/lucabortolussi/Projects/v3%20-%20Smartness/node_modules/@nuxt/kit/dist/index.mjs:2136:17)\n at async installModule (/Users/lucabortolussi/Projects/v3%20-%20Smartness/node_modules/@nuxt/kit/dist/index.mjs:2478:95)\n at async initNuxt (/Users/lucabortolussi/Projects/v3%20-%20Smartness/node_modules/nuxt/dist/index.mjs:4506:5)\n at async NuxtDevServer._load (/Users/lucabortolussi/Projects/v3%20-%20Smartness/node_modules/nuxi/dist/chunks/dev2.mjs:1894:5)\n at async NuxtDevServer.load (/Users/lucabortolussi/Projects/v3%20-%20Smartness/node_modules/nuxi/dist/chunks/dev2.mjs:1828:7)\n at async NuxtDevServer.init (/Users/lucabortolussi/Projects/v3%20-%20Smartness/node_modules/nuxi/dist/chunks/dev2.mjs:1823:5)\n```\n",[3206,3207],{"name":3133,"color":3134},{"name":3160,"color":3161},2455,"The requested module `tailwindcss` does not provide an export named `compile`","2024-11-04T20:48:46Z","https://github.com/nuxt/ui/issues/2455",0.7377981,{"description":3214,"labels":3215,"number":3219,"owner":3139,"repository":3140,"state":3141,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@1.22.19\n- Builder: -\n- User Config: app, compatibilityDate, devtools, modules, css, runtimeConfig, vuefire\n- Runtime Modules: @nuxt/ui-pro@3.0.2, nuxt-vuefire@1.0.5, @pinia/nuxt@0.10.1\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/stupefied-lucy-jmlxr4\n\n### Description\n\nTable component is not reactive. Here's a simple example where items are added and removed. The 'num items' is updating in the view. However, the table does not remove nor add items.\n\n``` vue\n\u003Ctemplate>\n {{ data.length }} num items\n \u003CUTable :data=\"data\" />\n \u003CUButton label=\"Delete\" @click=\"deleteItem\" />\n \u003CUButton label=\"Add\" @click=\"addItem\" />\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nfunction deleteItem() {\n const randomIndex = Math.floor(Math.random() * data.value.length);\n data.value.splice(randomIndex, 1);\n}\n\nfunction addItem() {\n data.value.push({\n id: Math.floor(Math.random() * 10000).toString(),\n });\n}\n\nconst data = ref([\n {\n id: \"4600\",\n },\n {\n id: \"4599\",\n },\n {\n id: \"4598\",\n },\n {\n id: \"4597\",\n },\n {\n id: \"4596\",\n },\n]);\n\u003C/script>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3216,3217,3218],{"name":3133,"color":3134},{"name":3160,"color":3161},{"name":3196,"color":3197},3821,"Table is not reactive","2025-04-08T10:36:33Z","https://github.com/nuxt/ui/issues/3821",0.74093276,{"description":3225,"labels":3226,"number":3227,"owner":3139,"repository":3149,"state":3141,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Environment\n\nOS: Windows 10\r\nBrowser: Brave\n\n### Reproduction\n\n1. In nuxt docs, open the [app.config.ts](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) or [useRouter](https://nuxt.com/docs/api/composables/use-router) link\r\n2. Look at the Sidebar of the page, multiple routes are styled as active links\n\n### Describe the bug\n\nIn the documentation, the multiple routes having similar names are styled as an active link at the same time\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[],1228,"docs: multiple links are styled as active links","2023-10-10T14:45:12Z","https://github.com/nuxt/nuxt.com/issues/1228",0.74356663,{"description":3233,"labels":3234,"number":3238,"owner":3139,"repository":3140,"state":3141,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@10.2.1\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.0, @nuxt/eslint@1.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\nhttps://github.com/deetz99/ui3-layer-test\n\n**Nuxt UI 2 working as expected**\nhttps://github.com/deetz99/ui2-layer-test\n\n### Description\n\nTailwind classes aren't resolved when using layers.\n\nAs seen in the repro, when using `pnpm dev` to run the .playground, the header, footer and layout styles are missing. \n\nUButton is still rendered correctly with the custom blue in the layer main.css file.\n\n`npx nuxi dev` (run the layer) renders the header, footer and layout correctly.\n\nAm I missing something here?\n\n## pnpm dev\n\n\u003Cimg width=\"1720\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/245bae83-2c86-42d1-a883-e472da30e6f7\" />\n\n## npx nuxi dev\n\n\u003Cimg width=\"1717\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/c362da21-f5f9-4c7d-a91c-f60bf6de9c0b\" />\n\n### Additional context\n\nThe classes are recognized in the .playground it seems. If I redefine the header, footer and layout in the playground they are displayed correctly. \n\n[header/footer/layout added to .playground](https://github.com/deetz99/ui3-layer-test/tree/test)\n\nIt seems that the styles aren't applied to the components that come from the layer.\n\n### Logs\n\n```shell-script\n\n```",[3235,3236,3237],{"name":3133,"color":3134},{"name":3160,"color":3161},{"name":3196,"color":3197},3544,"Tailwind classes missing when using layers","2025-03-14T19:00:15Z","https://github.com/nuxt/ui/issues/3544",0.75112927,["Reactive",3244],{},["Set"],["ShallowReactive",3247],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8aFtGADIeSR6Lpwm-hm3cVWf08oVOc2wmcKos1mu5ck":-1},"/nuxt/ui/3753"]