\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```",[3060,3061],{"name":3048,"color":3049},{"name":3022,"color":3023},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.66979855,{"description":3068,"labels":3069,"number":3070,"owner":3028,"repository":3039,"state":3052,"title":3071,"updated_at":3072,"url":3073,"score":3074},"After using `pnpm update` to upgrade vue to 3.4.3, the console throws a lot of `Hydration mismatch`. If I am using vue 3.3.13, no `Hydration mismatch` warnings will be thrown.\r\n\r\n\u003Cimg width=\"1402\" alt=\"SCR-20240103-qagg\" src=\"https://github.com/nuxt/nuxt.com/assets/133459587/188ac1c4-e19a-4570-a5d0-4863c92a7bda\">\r\n",[],1467,"About vue@3.4.3 causing hydration mismatch","2024-05-03T00:34:36Z","https://github.com/nuxt/nuxt.com/issues/1467",0.67100734,{"description":3076,"labels":3077,"number":3082,"owner":3028,"repository":3029,"state":3052,"title":3083,"updated_at":3084,"url":3085,"score":3086},"### Description\n\n\nHow to set v-model type of UCalendar\n`\n \u003CUCalendar\n v-model=\"datePickerValue\"\n range\n size=\"lg\"\n color=\"error\"\n weekday-format=\"short\"\n >\n \u003Ctemplate #heading=\"{ value }\">\n \u003Cdiv class=\"custom-heading\">\n \u003Ch2 class=\"text-sm font-medium text-[#3f3f3f] leading-tight\">\n {{ formatMonthYear(value) }}\n \u003C/h2>\n \u003C/div>\n \u003C/template>\n\n \u003C!-- Day 커스터마이즈 -->\n \u003Ctemplate #day=\"{ day }\">\n \u003Cdiv class=\"custom-day\">\n \u003Cspan\n :class=\"{\n 'text-sm font-semibold': isDaySelected(day),\n 'text-sm font-normal': !isDaySelected(day),\n }\"\n >{{ extractDay(day) }}\u003C/span\n >\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #week-day=\"{ day }\">\n \u003Cdiv class=\"custom-week-day bg-white border-none\">\n \u003Cspan class=\"font-medium text-xs text-[#7e7e7e]\">{{ day }}\u003C/span>\n \u003C!-- 예시: 요일을 간단하게 출력 -->\n \u003C/div>\n \u003C/template>\n \u003C/UCalendar>\n`\n\n`const datePickerValue = ref\u003C{ start: DateValue; end: DateValue }>({\n start: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n end: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n});`\n\nI put the above variable in v-model, but I get the following error. How should I declare the type?\n\n`'{ start: { readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCale...' 형식은 'DateRange' 형식에 할당할 수 없습니다.\n 'start' 속성의 형식이 호환되지 않습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식에 'ZonedDateTime' 형식의 #private, hour, minute, second 외 4개 속성이 없습니다.ts-plugin(2322)\nCalendar.vue(99, 3): 필요한 형식은 여기에서 '{ readonly \"onUpdate:modelValue\"?: ((date: DateRange | null) => any) | undefined; readonly \"onUpdate:placeholder\"?: ((...args: unknown[]) => any) | undefined; readonly \"onUpdate:startValue\"?: ((date: DateValue | undefined) => any) | undefined; ... 36 more ...; prevPage?: ((placeholder: DateValue) => DateValue) | und...' 형식에 선언된 'modelValue' 속성에서 가져옵니다.`",[3078,3081],{"name":3079,"color":3080},"question","d876e3",{"name":3022,"color":3023},3900,"How to set v-model type of UCalendar","2025-04-25T06:07:41Z","https://github.com/nuxt/ui/issues/3900",0.67729276,{"description":3088,"labels":3089,"number":3092,"owner":3028,"repository":3029,"state":3052,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Description\n\nBefore using `nuxt ui`, I briefly skimmed through the repository and found an already closed issue: [3018](https://github.com/nuxt/ui/issues/3018)\n\nThe error and solution mentioned in this issue (the [v2 documentation](https://ui.nuxt.com/getting-started/installation) indeed did not mention the solution) can actually be resolved by adding `tailwindcss@next` to the `peerDependencies` section in the `package.json` file.\n\nThis is because when [nuxi module add](https://github.com/nuxt/cli/blob/1afc06e8d08ea781fc5fede343de8d68865c2b4e/packages/nuxi/src/commands/module/add.ts#L134) installs a module, it not only installs the module itself but also scans the module package's `peerDependencies`.\n\nFor example, when using `nuxi module add pinia`, since `@pinia/nuxt` has `pinia` listed in its `peerDependencies` in the [package.json](https://github.com/vuejs/pinia/blob/3b21e08b6a068d18112b915b83f702fb5504ab73/packages/nuxt/package.json#L51C4-L51C20), both `@pinia/nuxt` and `pinia` will be automatically installed during the module installation.\n\nIf there are dependencies in `peerDependencies` that you do not want `nuxi module` to install automatically, you can use `peerDependenciesMeta` to ignore them, for [example](https://github.com/atinux/nuxt-auth-utils/blob/6b61b8888e3b3c6f60fd5ff767b7f0aa6cf09fc9/package.json#L57):\n\n```\n\"peerDependenciesMeta\": {\n \"pinia\": {\n \"optional\": true\n }\n },\n```\n\nTherefore, Nuxt UI can specify `tailwindcss@next` in the `peerDependencies` of `package.json`, ensuring Tailwind CSS is automatically installed when the Nuxt UI module is installed.\n\nThis solution applies to both v3 and v2.\n\n> PS: I noticed `typescript` in the `peerDependencies` of the v3 package.json. Is this a necessary dependency similar to `tailwindcss`? If not, after adding tailwindcss, perhaps `peerDependenciesMeta` could be used to ignore it.",[3090,3091],{"name":3079,"color":3080},{"name":3022,"color":3023},3349,"Add \"tailwindcss@next\" to the \"peerDependencies\" section in the package.json file.","2025-02-21T17:05:10Z","https://github.com/nuxt/ui/issues/3349",0.68296283,{"description":3098,"labels":3099,"number":3109,"owner":3028,"repository":3028,"state":3052,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### 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_",[3100,3103,3106],{"name":3101,"color":3102},"pending triage","E99695",{"name":3104,"color":3105},"needs reproduction","FBCA04",{"name":3107,"color":3108},"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.68559664,{"description":3115,"labels":3116,"number":3119,"owner":3028,"repository":3039,"state":3052,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### Environment\n\nMacOS, Chrome, Firefox and Safari\n\n### Reproduction\n\n### to reproduce\n1.go to the a module category page with direct access, such as [security](https://nuxt.com/modules?category=Security) or [devtools](https://nuxt.com/modules?category=Devtools) or do a page refresh from any of the category page.\n2. open a bunch of module links in a NEW TAB via right click \"open in a new tab\" or CMD + Click\n3. find out that when you open a new link to a module, for instance, [nuxt-security](), the target URL that is actually opened is [nuxt-image](https://nuxt.com/modules/image)\n\n\nIt happens when opening a new tabs from the \"security\" category `?category=Security`\nIt only happens when opening the security category on direct access by typing accessing url directly\nIt does not happen when opening the link on the same window on the `?category=Security` page\nIt does not happen when opening links from [module page without category slug](https://nuxt.com/modules)\n\n\n\n### Describe the bug\n\nThere is a unpredictable behaviour. When i click on nuxt modules cards that links to Nuxt 3 modules on a new tab, it open a different link than the expected one.\n\nWhen I try direct access by clicking on the link (not a open in a new tab or CMD + Click , it works as expected\n\n### Additional context\n\n\n### additional info\nreproduced on Chrome and Safari.\nhttps://github.com/user-attachments/assets/0742a7fa-80c6-4556-b31c-26f181d9f92b\n\n### guess\n when browsing a category with an active filter, the opened links pattern (`@nuxtjs/kinde`, `@logto/nuxt`, `@nuxt/devtools `) actually match the links displayed on the [root main modules page](https://nuxt.com/modules) without active filter `https://nuxt.com/modules`.\n\n### Logs\n\n```shell-script\n\n```",[3117],{"name":3048,"color":3118},"ff281a",1750,"(nuxt website): module cards links are inconsistent at open new tab","2025-03-21T16:12:36Z","https://github.com/nuxt/nuxt.com/issues/1750",0.68579185,{"description":3125,"labels":3126,"number":3132,"owner":3028,"repository":3029,"state":3052,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nFor example if I use something like this,\n\n`const items=[{label:'option 1', value:1},{label:'option 2',value:2}]`\n\n the value that is always assigned is string '1'\n\n`const typeData=ref(1)`\n\n ``\n \u003CUSelect v-model=\"form.productType\" class=\"w-full\" :items=\"items\" />\n```\n",[3127,3130,3131],{"name":3128,"color":3129},"duplicate","cfd3d7",{"name":3079,"color":3080},{"name":3022,"color":3023},2924,"[v3] select type only string?","2024-12-17T15:56:57Z","https://github.com/nuxt/ui/issues/2924",0.6873084,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQWesVZ3KBz4fcn_mTSdMWjPgFSfF7osxcEdB1HSrszQ":-1},"/nuxt/ui/3261"]