\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003CUInput v-model=\"keyword\" />\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[2867,2870],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"triage","ffffff",2713,"nuxt","ui","open","UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.74552363,{"description":2882,"labels":2883,"number":2888,"owner":2874,"repository":2875,"state":2876,"title":2889,"updated_at":2890,"url":2891,"score":2892},"",[2884,2885],{"name":2868,"color":2869},{"name":2886,"color":2887},"v3","49DCB8",2346,"[Popover] Hover mode not working on mobile","2024-11-06T17:02:41Z","https://github.com/nuxt/ui/issues/2346",0.7509314,{"description":2894,"labels":2895,"number":2902,"owner":2874,"repository":2903,"state":2876,"title":2904,"updated_at":2905,"url":2906,"score":2907},"we'd love to have the nuxt.com docs available in translations for users across the world\n\nalthough this has been a plan for some time, and was indeed the case in nuxt v2, we're still not there with v3 docs\n\nRelated issues: https://github.com/nuxt/nuxt/issues/19926, https://github.com/nuxt/nuxt/issues/21926, https://github.com/nuxt/nuxt/discussions/16054, https://github.com/nuxt/nuxt.com/issues/1448 and https://github.com/nuxt/translations/discussions/4 (private repo - relevant content copied into this issue).\n\n## Key requirements\n\n- needs to be performant and not regress performance of the documentation\n- translations need to remain always in sync, falling back to english text if required\n- needs to allow community contribution\n\n## Translation and sync automation\n\nDocumentation sources currently come from https://github.com/nuxt/nuxt.com, https://github.com/nuxt/nuxt and https://github.com/nuxt/examples. upstream changes need to be localisable, and trigger call for updates for translators, without blocking the documentation.\n\nIt would be nice to consider exploring LLM triggers for translation (see for example the way https://github.com/formkit uses ai in the process of building their documentation website) - at least for 'fallback' content.\n\n👉 See https://github.com/nuxt/nuxt/discussions/29949 for a proposal\n\n## Building a team\n\nWe've had many offers of help for translating the docs, and we'll need to build a team - but first we need to add the infrastructure to make updating translations possible.\n\nSo initially I would love for someone or a small group to take on the task of building up the automation + integration into the [nuxt/nuxt.com](https://github.com/nuxt/nuxt.com) repository, before we move ahead to create a bigger team of translators.",[2896,2899],{"name":2897,"color":2898},"enhancement","1ad6ff",{"name":2900,"color":2901},"roadmap","ff7a1a",1711,"nuxt.com","internationalisation for nuxt.com","2025-01-18T03:00:02Z","https://github.com/nuxt/nuxt.com/issues/1711",0.7549619,{"description":2909,"labels":2910,"number":2911,"owner":2874,"repository":2903,"state":2912,"title":2913,"updated_at":2914,"url":2915,"score":2916},"The docs do not have styles for h5 headers, you can see it in posts with a lot of sections and sub-sections, like the [v4 Migration guide](https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4).\r\n\r\nI suggest at least making those titles bold so they stand out a bit more.",[],1596,"closed","Missing styles for h5","2024-06-17T14:49:04Z","https://github.com/nuxt/nuxt.com/issues/1596",0.71167314,{"description":2918,"labels":2919,"number":2920,"owner":2874,"repository":2921,"state":2912,"title":2922,"updated_at":2923,"url":2924,"score":2925},"Tailwind v4 moves configuration into CSS instead of `tailwind.config.js`. https://tailwindcss.com/blog/tailwindcss-v4-alpha\r\n\r\nFor example in v4 to specify a custom font, you'd just do this and then you can use `.font-display` within your HTML. (example from their blog post)\r\n```css\r\n/* main.css */\r\n@import \"tailwindcss\";\r\n\r\n@theme {\r\n --font-family-display: \"Satoshi\", \"sans-serif\";\r\n}\r\n```\r\n### Workaround\r\n\r\nCurrently the workaround to use Tailwind CSS v4 with Nuxt Fonts is simply to specify using `font-family` in the CSS so it's loaded in.\r\n```css\r\n@import \"tailwindcss\";\r\n\r\n@theme {\r\n --font-family-marker: \"Permanent Marker\", cursive;\r\n}\r\n\r\n.nuxt-fonts-permanent-marker {\r\n font-family: \"Permanent Marker\", cursive;\r\n}\r\n```",[],132,"fonts","Support Tailwind CSS v4","2024-04-22T09:11:12Z","https://github.com/nuxt/fonts/issues/132",0.7116793,{"description":2927,"labels":2928,"number":2932,"owner":2874,"repository":2875,"state":2912,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.8\n\n### Description\n\n```vue\n\u003Cscript setup lang=\"ts\">\ntype Data = {\n id:number,\n name:string\n}\n\nconst defaultData = [\n {\n id: 1,\n name: \"a\"\n },\n {\n id: 2,\n name: \"b\"\n }\n]\n\nconst data = ref\u003CData[]>([])\nconst rerender = () => {\n if (!data.value?.length) {\n data.value = defaultData\n } else {\n data.value = []\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"rerender\" @click=\"rerender()\" />\n \u003CUTable :data=\"data\">\n \u003Ctemplate #empty>\n no data\n \u003C/template>\n \u003C/UTable>\n \u003C/div>\n\u003C/template>\n\n````\nIn this example, if the table's data is initially empty and then updated (by clicking the \"rerender\" button), you will notice that the content in the empty slot disappears. This indicates that the table's data is no longer empty, yet nothing is rendered in the table. The reason is that the table's columns are not reactive. I believe this limitation is caused by TanStack.\n\n### Potential Solution\n```vue\nwatch(columns, (newColumns) => {\n tableApi.setOptions((prevOpt) => ({\n ...prevOpt,\n columns: newColumns \n }))\n}) \n```\n\n\n\n\n### Additional context\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { watch } from 'vue'\nimport { getCoreRowModel, useVueTable } from '@tanstack/vue-table'\ntype Data = {\n id: number,\n name: string\n}\n\nconst defaultData = [\n {\n id: 1,\n name: \"a\"\n },\n {\n id: 2,\n name: \"b\"\n }\n]\n\nconst data = ref\u003CData[]>([])\nconst columns = computed(() => Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: accessorKey })))\n\nconst tableApi = useVueTable({\n data,\n columns: columns.value,\n getCoreRowModel: getCoreRowModel()\n})\n\nconst rerender = () => {\n if (!data.value.length) {\n\n data.value = defaultData\n } else {\n data.value = []\n }\n}\n\n/* watch(columns, (newColumns) => {\n tableApi.setOptions((prevOpt) => ({\n ...prevOpt,\n columns: newColumns \n }))\n}) */\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"rerender\" @click=\"rerender()\" />\n \u003Cdiv>\n {{ columns }}\n \u003C/div>\n \u003Cbr>\n \u003Cdiv>\n {{ tableApi.options }}\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n```\n\nnoticed that tableApi's columns won't change along with updates to the data",[2929,2931],{"name":2897,"color":2930},"a2eeef",{"name":2886,"color":2887},2689,"[Table] reactive columns for auto-generated UTable columns","2024-11-21T13:11:03Z","https://github.com/nuxt/ui/issues/2689",0.73377544,{"description":2938,"labels":2939,"number":2942,"owner":2874,"repository":2875,"state":2912,"title":2943,"updated_at":2944,"url":2945,"score":2946},"https://www.radix-vue.com/components/select.html#scrollupbutton",[2940,2941],{"name":2897,"color":2930},{"name":2886,"color":2887},2145,"[Select] Handle scroll buttons","2025-04-21T20:05:00Z","https://github.com/nuxt/ui/issues/2145",0.73987824,{"description":2948,"labels":2949,"number":2952,"owner":2874,"repository":2903,"state":2912,"title":2953,"updated_at":2954,"url":2955,"score":2956},"\n",[2950],{"name":2868,"color":2951},"ff281a",566,"[Docs] Switch between framework `v2` and `v3` swiper error","2023-02-15T12:32:33Z","https://github.com/nuxt/nuxt.com/issues/566",0.74075115,{"description":2958,"labels":2959,"number":2952,"owner":2874,"repository":2966,"state":2912,"title":2967,"updated_at":2968,"url":2969,"score":2956},"I'm currently trying to implement component tests for a component that uses `vue-i18n` and I'm getting this error:\r\n\r\n```\r\nSyntaxError: Need to install with `app.use` function\r\n - /var/www/html/node_modules/@intlify/core-base/node_modules/@intlify/message-compiler/dist/message-compiler.cjs.js:58:19\r\n - /var/www/html/node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js:105:34\r\n - /var/www/html/node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js:2224:15\r\n - /components/metronic/form/Input.vue:326:1\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:171:22\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7194:29\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7149:11\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:13\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5455:17\r\n - /var/www/html/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5059:21\r\n```\r\n\r\nI have `@intlify/nuxt3` configured in my `nuxt.config.ts`:\r\n\r\n```typescript\r\nexport default defineNuxtConfig({\r\n modules: [\"@pinia/nuxt\", \"@nuxtjs/tailwindcss\", \"@intlify/nuxt3\", \"@nuxtjs/google-fonts\", \"@vueuse/nuxt\", \"nuxt-vitest\"],\r\n intlify: {\r\n localeDir: \"locales\",\r\n vueI18n: {\r\n locale: \"de\",\r\n },\r\n },\r\n// ...\r\n```\r\n\r\nI'm working around this problem by manually using `createI18n` in my setup file and adding it to the global plugins of vue test-utils:\r\n\r\n```typescript\r\nimport { config } from '@vue/test-utils';\r\nimport { createI18n } from 'vue-i18n';\r\n\r\nconfig.global.plugins.push(\r\n createI18n({\r\n locale: 'de',\r\n legacy: false,\r\n })\r\n);\r\n```\r\n\r\nThen, since I'm also testing using `@testing-library/vue` which has another [bug](https://github.com/testing-library/vue-testing-library/issues/279), I also have to use the workaround described [there](https://github.com/testing-library/vue-testing-library/issues/279#issuecomment-1336396037) to also get the plugin working for testing-library.\r\n\r\nI know there is nobody to blame but component tests are DX-wise very bad. I have to invest more time into getting the tests to actually work, than writing them :/",[2960,2963],{"name":2961,"color":2962},"vitest-environment","b60205",{"name":2964,"color":2965},"needs reproduction","DE7793","test-utils","Vue-I18n not loaded","2024-07-02T19:50:37Z","https://github.com/nuxt/test-utils/issues/566",{"description":2971,"labels":2972,"number":2974,"owner":2874,"repository":2903,"state":2912,"title":2975,"updated_at":2976,"url":2977,"score":2978},"https://content-v2.nuxtjs.org/guide/writing/mdc#props\n\n",[2973],{"name":2868,"color":2951},496,"[Milkdown] On serialize, component props should keep their current format `inline` or `yaml`","2023-06-06T12:14:53Z","https://github.com/nuxt/nuxt.com/issues/496",0.74095917,["Reactive",2980],{},["Set"],["ShallowReactive",2983],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fF_mAhEwmifjBPrKD6i4nT2oqJpltorJkO6bYvqIjqjA":-1},"/nuxt/nuxt.com/1028"]