\n```\n\n---\nbut if i set defaultVariants in `app.config` its works:\n```\ndefaultVariants: {\n color: 'neutral',\n button: true\n},\n```\n\n---\nso how do you make it work?",[2867,2870],{"name":2868,"color":2869},"question","d876e3",{"name":2871,"color":2872},"v3","49DCB8",3179,"ui","Understanding how variants work (custom variants)","2025-01-26T09:27:59Z","https://github.com/nuxt/ui/issues/3179",0.6631258,{"description":2880,"labels":2881,"number":2884,"owner":2857,"repository":2874,"state":2859,"title":2885,"updated_at":2886,"url":2887,"score":2888},"### Description\n\nThank you very much for the best component library for Nuxt!\nMy question about the Table component (Tanstack)\nThe documentation has an example of how to send data received through fetch to a table, but there is no example for sorting and filtering using the Fetch call(\n\nThe documentation mentions columnFiltersOptions, but I don’t understand at all how to run my MYonColumnFiltersChange function when filters change( \n\n`\u003CUTable ref=\"table\" v-model:column-filters-options=\"MYonColumnFiltersChange \" />`\n\nit doesn't work that way\n\nI really ask for help!",[2882,2883],{"name":2868,"color":2869},{"name":2871,"color":2872},3098,"Table filtered, sorting fetch","2025-01-14T11:05:37Z","https://github.com/nuxt/ui/issues/3098",0.6746269,{"description":2890,"labels":2891,"number":2899,"owner":2857,"repository":2874,"state":2900,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Environment\n\nI just use the demo component on nuxt ui page\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nI recorded it, you can see my vid:\n\nhttps://github.com/user-attachments/assets/82b444d5-473f-43b3-b26f-55b30cc61184\n\n### Description\n\nIt happens when a select box is opening.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2892,2895,2896],{"name":2893,"color":2894},"bug","d73a4a",{"name":2871,"color":2872},{"name":2897,"color":2898},"triage","ffffff",3261,"closed","I saw some flickering with the select boxes in a form","2025-03-08T13:57:49Z","https://github.com/nuxt/ui/issues/3261",0.63727856,{"description":2906,"labels":2907,"number":2910,"owner":2857,"repository":2874,"state":2900,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@9.6.7\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.10, @nuxt/eslint@0.7.2, @nuxtjs/i18n@9.1.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nNone\n\n### Description\n\nThank you very much for providing such a great component library. I'm trying to use it in my personal project.\n\nThe following is the relevant code:\n```ts\nconst columns = computed(() => defaultColumns.filter(column => selectedColumns.value.includes(column.accessorKey)))\n```\n```vue\n\u003CUTable\n :columns=\"columns\"\n :data=\"data\"\n/>\n```\n\n---\nI checked the latest documentation, and the examples of UTable regarding column display control seem to have no effect, such as: https://ui3.nuxt.dev/components/table#with-column-visibility.\n\n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2908,2909],{"name":2893,"color":2894},{"name":2871,"color":2872},2874,"The update of the columns property will not trigger an update of the UTable component","2025-01-25T13:12:40Z","https://github.com/nuxt/ui/issues/2874",0.67270124,{"description":2916,"labels":2917,"number":2920,"owner":2857,"repository":2874,"state":2900,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Description\n\nI want to configure my Nuxt UI v3 project only to use black and white colors with the neutral palette from Tailwind, similar to the one found in shadcn. I understand Nuxt UI supports Tailwind CSS theming, but I’m unsure of the best/recommended way to override all component colors globally",[2918,2919],{"name":2868,"color":2869},{"name":2871,"color":2872},3200,"How to create a black & white only theme in Nuxt UI v3","2025-02-09T12:59:38Z","https://github.com/nuxt/ui/issues/3200",0.6734383,{"description":2926,"labels":2927,"number":2930,"owner":2857,"repository":2874,"state":2900,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Description\n\ni noticed that NUXT UI / NUXT UI PRO were refactored to use tailwind's new version 3 stuff + radix...\n\ni just went to the tailwind docs today and it looks like they just skipped right past their new version 3 and went to version 4...\n\nany ideas how this effects NUXT UI/PRO? \n\nMy undersanding is that version 3->4 means it was a semver breaking change?",[2928,2929],{"name":2868,"color":2869},{"name":2871,"color":2872},3167,"tailwind version 4..?","2025-01-24T10:17:32Z","https://github.com/nuxt/ui/issues/3167",0.67588514,{"description":2936,"labels":2937,"number":2947,"owner":2857,"repository":2857,"state":2900,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.15.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.7.0\n- Builder: -\n- User Config: ssr, devtools, build, vite, vue, hooks, css, components, runtimeConfig, router, ignore, app, site, robots, routeRules, ogImage, schemaOrg, icon, postcss, nitro, modules, vitalizer, pwa, ui\n- Runtime Modules: @nuxt/ui@2.18.7, @nuxtjs/device@3.2.4, @vueuse/nuxt@11.1.0, @pinia/nuxt@0.5.5, @nuxtjs/seo@2.0.0-rc.18, @vite-pwa/nuxt@0.10.5, nuxt-vitalizer@0.10.0\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nNot sure how to provide a reproduction since the issue only appears once i build my app.\n\n### Describe the bug\n\nI need to render dynamic templates on the server. For this I have set `vue.runtimeCompiler: true` inside the nuxt config. I also have written a simple `RenderTemplate.vue` component that gets passed a template string and renders the appropriate content.\n\n```ts\n\u003Cscript setup lang=\"ts\">\n // Custom components we allow to render\n import {\n KlzAudio,\n // Tuncated full list...\n } from '#components';\n\n interface Props {\n template: string;\n // eslint-disable-next-line\n options?: any;\n }\n\n const props = withDefaults(defineProps\u003CProps>(), {\n options: {}\n });\n\n const compiledTemplate = computed(() => {\n return defineComponent({\n components: {\n KlzAudio,\n // Tuncated full list...\n },\n props: {\n options: {\n type: Object,\n default: () => ({})\n }\n },\n template: props.template\n });\n });\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ccomponent\n :is=\"compiledTemplate\"\n ref=\"compRef\"\n :options=\"props.options\"\n >\u003C/component>\n \u003C/div>\n\u003C/template>\n```\n\nThis works just fine in development mode or when I build using `ssr: false`. In development I have no issues also with `ssr: true` everything works as expected and If I inspect the source code of the pages where I use the `RenderTemplate` component I also see the rendered HTML just fine. But when I build my app using `npx nuxi build --preset=cloudflare_pages` and try to run the server I get:\n\n```\nOn-the-fly template compilation is not supported in the ESM build of @vue/server-renderer. All templates must be pre-compiled into render functions.\n```\n\nUPDATE: This only happens if i use the `cloudflare_pages` preset with `node-server` it works just fine.\n\nI have only found one other issue that mentioned this exact error: https://github.com/nuxt/nuxt/issues/13358\n\nSadly the fix suggested does not work in my scenario since I render more complex components and would get other errors related to not being in the nuxt context using `renderString()`.\n\nI also found that using `render` instead of `template` together with `compile` resolves the \"on-the-fly\" error but when looking at the source of my page the dynamically rendered content is not part of the HTML rendered on the server which is a big issue.\n\nResolves initial error but does not render HTML content on the server:\n```ts\nconst compiledTemplate = computed(() => {\n return defineComponent({\n components: {\n KlzAudio,\n // Truncated full list...\n },\n props: {\n options: {\n type: Object,\n default: () => ({})\n }\n },\n render: compile(props.template)\n });\n});\n```\n\nHow can I fix this issues? Why is it working in dev but not when building the app? \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2938,2941,2944],{"name":2939,"color":2940},"pending triage","E99695",{"name":2942,"color":2943},"needs reproduction","FBCA04",{"name":2945,"color":2946},"closed-by-bot","ededed",29769,"On-the-fly template compilation is not supported in the ESM build of @vue/server-renderer.","2024-11-11T02:00:16Z","https://github.com/nuxt/nuxt/issues/29769",0.67749083,{"description":2953,"labels":2954,"number":2956,"owner":2857,"repository":2874,"state":2900,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### Environment\n\n- Node version: 22.9.0 (Docker image 22.9.0-alpine)\n- Nuxt version: 3.14.1592\n- Package manager: pnpm@9.14.2\n- nuxt/ui module version: 2.19.2\n- package.json\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\": \"^2.19.2\",\n \"nuxt\": \"^3.14.1592\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"packageManager\": \"pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387\"\n }\n ```\n- Dockerfile\n ```\n ARG NODE_DOCKER_IMAGE=22.9.0-alpine\n FROM node:$NODE_DOCKER_IMAGE AS base\n \n ARG PORT=3000\n \n ENV NODE_ENV=production\n \n WORKDIR /app\n # Build\n FROM base AS builder\n \n RUN npm install -g pnpm\n \n COPY --link package.json .\n COPY --link pnpm-lock.yaml .\n \n RUN pnpm install --production=true\n \n COPY --link . .\n \n RUN pnpm build\n \n # Run\n FROM base\n \n ENV PORT=$PORT\n \n COPY --from=builder /app/.output /app/.output\n \n COPY --from=builder /app/docker-entrypoint.sh /usr/local/bin/docker-entrypoint\n \n RUN chmod +x /usr/local/bin/docker-entrypoint\n \n ENTRYPOINT [\"docker-entrypoint\"]\n ```\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\n1. Create the \"frontend\" Nuxt app `pnpx nuxi@latest init frontend`\n2. `cd frontend`\n3. Add the \"nux/ui\" module `pnpx nuxi@latest module add ui`\n4. Put the Dockerfile described inside the frontend folder\n5. `docker build .`\n\n### Description\n\nThe build fails:\n```\n=> ERROR [builder 6/6] RUN pnpm build 3.4s\n------ \n > [builder 6/6] RUN pnpm build: \n0.512 \n0.512 > nuxt-app@ build /app \n0.512 > nuxt build \n0.512 \n0.658 Nuxt 3.14.1592\n1.374 [nuxt:tailwindcss] ℹ Using default Tailwind CSS file\n1.589 ℹ Nuxt Icon server bundle mode is set to local\n3.009 ℹ Building client...\n3.018 ℹ vite v5.4.11 building for production...\n3.040 ℹ transforming...\n3.350 ℹ ✓ 57 modules transformed.\n3.351 \n3.351 ERROR x Build failed in 331ms\n3.351 \n3.351 \n3.351 ERROR Nuxt Build Error: [vite:css] [postcss] Cannot find module 'tailwindcss/lib/lib/defaultExtractor.js'\n3.351 Require stack:\n3.351 - /app/.nuxt/nuxtui-tailwind.config.cjs\n3.351 file: /app/node_modules/.pnpm/tailwindcss@3.4.15/node_modules/tailwindcss/tailwind.css:undefined:NaN\n3.351 \n3.351 Require stack:\n3.351 - .nuxt/nuxtui-tailwind.config.cjs\n3.351 file: node_modules/.pnpm/tailwindcss@3.4.15/node_modules/tailwindcss/tailwind.css:undefined:NaN\n3.351 at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)\n3.351 at Function.resolve (node:internal/modules/helpers:145:19)\n3.351 at _resolve (node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:241814)\n3.351 at jiti (node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:244531)\n3.351 at .nuxt/nuxtui-tailwind.config.cjs:2:60\n3.351 at evalModule (node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:247313)\n3.351 at jiti (node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:245241)\n3.351 at .nuxt/tailwind.config.cjs:7:1\n3.351 at evalModule (node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:247313)\n3.351 at jiti (node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:245241)\n3.351 at node_modules/.pnpm/tailwindcss@3.4.15/node_modules/tailwindcss/lib/lib/load-config.js:56:30\n3.351 at loadConfig (node_modules/.pnpm/tailwindcss@3.4.15/node_modules/tailwindcss/lib/lib/load-config.js:58:6)\n3.351 at getTailwindConfig (node_modules/.pnpm/tailwindcss@3.4.15/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:116)\n3.351 at node_modules/.pnpm/tailwindcss@3.4.15/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:100:92\n3.351 at node_modules/.pnpm/tailwindcss@3.4.15/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11\n3.351 at plugins (node_modules/.pnpm/tailwindcss@3.4.15/node_modules/tailwindcss/lib/plugin.js:38:69)\n3.351 at LazyResult.runOnRoot (node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/lazy-result.js:329:16)\n3.351 at LazyResult.runAsync (node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/lazy-result.js:258:26)\n3.351 at LazyResult.async (node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/lazy-result.js:160:30)\n3.351 at LazyResult.then (node_modules/.pnpm/postcss@8.4.49/node_modules/postcss/lib/lazy-result.js:404:17)\n3.351 \n3.370 ELIFECYCLE Command failed with exit code 1.\n```\n\n### Additional context\n\nMaybe I'm facing the same problem stated in https://github.com/nuxt/ui/issues/1689\n\n### Logs\n\n```shell-script\n\n```",[2955],{"name":2893,"color":2894},2785,"Nuxt Build Error at build time with Docker","2024-11-27T10:23:20Z","https://github.com/nuxt/ui/issues/2785",0.67951477,{"description":2962,"labels":2963,"number":2966,"owner":2857,"repository":2874,"state":2900,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Description\n\nStyles with tailwindcss 4.0.13 seem to be broken after updating from NuxtUI pervious alpha.\n\n```\n\"dependencies\": {\n \"@iconify-json/ri\": \"1.2.5\",\n \"@nuxt/ui\": \"3.0.0\",\n \"@vueuse/core\": \"12.7.0\",\n \"@vueuse/nuxt\": \"12.7.0\",\n }\n```\nmain.css\n```\n@import 'tailwindcss' theme(static);\n@import '@nuxt/ui';\n```\nHas anyone else ran into this issue and if so how did you fix it?",[2964,2965],{"name":2868,"color":2869},{"name":2871,"color":2872},3525,"Styles issue have upgrade from 3.0.0-alpha.13 to 3.0.0","2025-03-12T23:28:54Z","https://github.com/nuxt/ui/issues/3525",0.6801562,["Reactive",2972],{},["Set"],["ShallowReactive",2975],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpjgZJLrb1-4E68xXC76Ik7dynejjcPjfYIwtG1FIxrU":-1},"/nuxt/ui/3052"]