\r\n Loading\r\n \u003C/div>\r\n \u003C/template>\r\n \u003Cdiv class=\"content\" ref=\"someRef\">\r\n This text should NOT be large!\r\n Remove the \u003Cpre>ref=\"someRef\"\u003C/pre> from the parent and it works\r\n \u003C/div>\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\r\n\r\n**Expected behaviour when loading the page:**\r\nA big loading spinner, and, when everything is done loading, some normal text, like this:\r\n\r\n\r\n**Instead,** you get this:\r\n\r\n\r\nWhen you remove the `ref=\"someRef\"` from the content div, it works as expected",[],"nuxt","icon","open","Unexpected behaviour when using an Icon within ClientOnly fallback","2023-12-18T12:08:48Z","https://github.com/nuxt/icon/issues/129",0.7245436,{"description":3026,"labels":3027,"number":3031,"owner":3018,"repository":3032,"state":3020,"title":3033,"updated_at":3034,"url":3035,"score":3036},"### Environment\n\nThis is one of the environments i came across the problem:\r\n[11:15:23 AM] Working directory: /Users/lorenzorottigni/Documents/gitlab_private/portfolio.rottigni.tech\r\n[11:15:23 AM] Nuxt project info: (copied to clipboard)\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.13.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.21\r\n- Builder: vite\r\n- User Config: ssr, debug, srcDir, serverDir, test, app, modules, css, postcss, unocss, tailwindcss, googleFonts, i18n, nitro, pwa, image, delayHydration, extensions, typescript, builder, vite, vue, runtimeConfig, devServer, sourcemap, experimental\r\n- Runtime Modules: @vueuse/nuxt@10.7.2, @nuxtjs/tailwindcss@6.10.4, @pinia/nuxt@0.5.1, @unocss/nuxt@0.58.3, @nuxtjs/i18n@8.0.0, @nuxt/image@1.3.0, nuxt-jsonld@2.0.8, @kevinmarrec/nuxt-pwa@0.17.0, @nuxtjs/google-fonts@3.1.3, nuxt-calendly@0.1.18, nuxt-delay-hydration@1.3.3, @nuxt/test-utils/module@3.10.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n[11:15:23 AM] 👉 Report an issue: https://github.com/nuxt/nuxt/issues/new\r\n\r\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\r\n\r\n👉 Read documentation: https://nuxt.com\n\n### Reproduction\n\nThe crucial file is MyComponent.spec.ts:\r\nhttps://stackblitz.com/~/github.com/LorenzoRottigni/nuxt-test-utils-vitest-spy\n\n### Describe the bug\n\nI'm currently facing challenges in testing a component method within a Nuxt environment. Specifically, I'm attempting to spy on a component method to test its interactions within template events. Despite researching similar cases online, I've yet to find a clear solution to this issue.\r\n\r\nOne suggestion I encountered was to define the spy before the component mounts. However, I'm unable to access `wrapper.vm` before mount time, complicating this approach. Additionally, I experimented with spying on the global injected `$fetch` method from the 'ofetch' library. Unfortunately, this led to another error regarding the inability to redefine the variable `$fetch` when attempting variations like:\r\n\r\n```javascript\r\nimport OFetch from 'ofetch'\r\nconst spy = vi.spyOn(OFetch, '$fetch')\r\n// or\r\nconst spy = vi.spyOn(global, '$fetch')\r\n// or\r\nconst spy = vi.spyOn({ $fetch }, '$fetch')\r\n```\r\n\r\nIt appears that this issue may not be directly tied to the nuxt-test-utils package. Nevertheless, I wanted to bring it to your attention in the hopes that someone might offer guidance or assistance. I'm eager to find a resolution and would appreciate any insights or suggestions you might have.\r\n\r\nI'm also considering reporting a similar issue to the vue-test-utils package, as I suspect that this problem might be reproducible outside of the Nuxt environment.\r\n\r\nThank you for your time and assistance.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3028],{"name":3029,"color":3030},"pending triage","5D08F5",763,"test-utils","Unable to use vitest spy within nuxt 3 component methods.","2024-05-28T15:28:23Z","https://github.com/nuxt/test-utils/issues/763",0.7288727,{"description":3038,"labels":3039,"number":3040,"owner":3018,"repository":3019,"state":3020,"title":3041,"updated_at":3042,"url":3043,"score":3044},"This bug is so random and it's only happen on our production site. Sometimes it happen, sometimes not. I tried create a reproduction but it's only happen on our production site.\nBut you can see from the screenshot below that the request to times icon is returning 2 other icons. It return the error message: `[Icon] failed to load icon m-icon:times`\n\n**Versions:**\n\"@nuxt/icon\": \"1.9.1\",\n\"@nuxt/ui\": \"2.18.4\",\n\"nuxt\": \"3.13.0\"\n\n\n\n\n",[],320,"Requested custom icon is returning randomly in production site","2024-12-11T06:12:25Z","https://github.com/nuxt/icon/issues/320",0.7298307,{"description":3046,"labels":3047,"number":3057,"owner":3018,"repository":3058,"state":3020,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.13.1`\n- Nuxt Version: `3.16.1`\n- CLI Version: `3.23.1`\n- Nitro Version: `2.11.7`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n- User Config: `compatibilityDate`, `extends`, `modules`, `css`, `app`, `linkChecker`, `build`, `schemaOrg`, `sitemap`, `robots`, `future`, `runtimeConfig`, `imports`, `ui`, `image`, `dayjs`, `prismic`\n- Runtime Modules: `@nuxtjs/prismic@4.1.0`, `nuxt-swiper@2.0.0`, `dayjs-nuxt@2.1.11`, `@nuxt/ui@3.0.0`, `@zadigetvoltaire/nuxt-gtm@0.0.13`, `@nuxtjs/seo@3.0.1`, `@nuxt/scripts@0.11.2`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0\n\n### Reproduction\n\nnot needed\n\n### Description\n\nThe header with a lot of text in mobile is getting squashed. I believe the problem is the min-h-16 utility.\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3048,3051,3054],{"name":3049,"color":3050},"bug","d73a4a",{"name":3052,"color":3053},"v3","49DCB8",{"name":3055,"color":3056},"triage","ffffff",3635,"ui","UModal Header height clipped","2025-03-20T13:20:49Z","https://github.com/nuxt/ui/issues/3635",0.7353956,{"description":3064,"labels":3065,"number":3069,"owner":3018,"repository":3058,"state":3070,"title":3071,"updated_at":3072,"url":3073,"score":3074},"### Environment\n\nOperating System: Darwin\nNode Version: v20.18.0\nNuxt Version: 3.14.1592\nPackage Manager: pnpm@9.14.4\nBuilder: -\nUser Config: default\nRuntime Modules: @nuxt/ui@3.0.0-alpha.10\nBuild 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\nhttps://codesandbox.io/p/devbox/nifty-ride-lx6qlg\n\n### Description\n\nThe same problem occurs in official documents. https://ui3.nuxt.dev/components/toast\n1. Open the Toast component of the document.\n2. Click the \"Show toast\" button to show toast.\n3. Click X to close the toast when it appears.\n4. Click the \"Show toast\" button again, and the toast that appears does not have a progress bar and does not automatically close.\n\nMy production environment project also has this problem, I hope it can be solved as soon as possible.\nAlso, the progress bar sometimes flashes, so i can expect new configurations to setting the progress bar showing is true or false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3066,3067,3068],{"name":3049,"color":3050},{"name":3052,"color":3053},{"name":3055,"color":3056},3003,"closed","The Toast component loses the progress bar and does not automatically close","2025-03-24T13:48:53Z","https://github.com/nuxt/ui/issues/3003",0.7060093,{"description":3076,"labels":3077,"number":3083,"owner":3018,"repository":3058,"state":3070,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### Environment\n\nlatest\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/gifted-moon-ms65xm\n\n### Description\n\nhovering over a open drop down item in a drawer results in a recursion error.\n\n### Additional context\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst items = ref([\n {\n label: 'hover me for a recursion error',\n },\n])\n\u003C/script>\n\n\n\u003Ctemplate>\n \u003CUDrawer>\n \u003CUButton label=\"Open Drawer\"/>\n \u003Ctemplate #content>\n \u003CUDropdownMenu\n :items=\"items\"\n >\n \u003CUButton label=\"Open Drop down\"/>\n \u003C/UDropdownMenu>\n \u003C/template>\n \u003C/UDrawer>\n\u003C/template>\n```\n\n### Logs\n\n```shell-script\nUncaught InternalError: too much recursion\n NuxtJS 5\n focus\n handleFocusOut\n ct\n f\n focus\n```",[3078,3079,3080],{"name":3049,"color":3050},{"name":3052,"color":3053},{"name":3081,"color":3082},"reka-ui","56d799",3357,"Cant put dropdown inside drawer","2025-04-08T19:49:57Z","https://github.com/nuxt/ui/issues/3357",0.71801764,{"description":3089,"labels":3090,"number":3102,"owner":3018,"repository":3018,"state":3070,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### Environment\n\nNuxi 3.6.2 \r\n \r\nRootDir: /home/ben/workspace/ceasy/packages/app/web \r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.9.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@8.19.1\r\n- Builder: vite\r\n- User Config: telemetry, modules, tailwindcss, colorMode, typescript, alias, vite, runtimeConfig, experimental\r\n- Runtime Modules: @nuxtjs/color-mode@^3.3.0, @nuxtjs/tailwindcss@^6.8.0, unplugin-icons/nuxt, @nuxt/image@1.0.0-rc.3, @sidebase/nuxt-pdf\r\n- Build Modules: -\n\n### Reproduction\n\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst props = defineProps\u003C{\r\n scaleSize: number\r\n currentHeight: number\r\n}>()\r\n\r\nconst heightStyle = computed(() => ({ height: `${props.currentHeight}px` }))\r\nconst mainStyle = computed(() => ({\r\n scale: props.scaleSize,\r\n transformOrigin: `top`,\r\n}))\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"m-4 print:m-0\" :style=\"heightStyle\">\r\n \u003Cmain :style=\"mainStyle\">\r\n {{ heightStyle }}\r\n {{ mainStyle }}\r\n \u003C/main>\r\n \u003C/div>\r\n\u003C/template>\r\n```\n\n### Describe the bug\n\nThe scaleSize and currentHeight are based on https://vueuse.org/core/useWindowSize/#usewindowsize\r\n\r\nSo it's normal that during SSR the window size is incorrect, since it's unknown.\r\n\r\nThe defaults for the props in that case are:\r\n\r\n```\r\n{\r\n scaleSize: 1\r\n currentHeight: 794\r\n}\r\n```\r\n\r\nAfter the hydration however, the above component renders to:\r\n\r\n```html\r\n\u003Cdiv class=\"m-4 print:m-0\" style=\"height:794px;\">\u003Cmain style=\"scale:1;transform-origin:top;\">{\r\n \"height\": \"513.9670710571924px\"\r\n} {\r\n \"scale\": 0.6473136915077989,\r\n \"transformOrigin\": \"top\"\r\n}\u003C/main>\u003C/div>\r\n```\r\n\r\n```vue\r\n {{ heightStyle }}\r\n {{ mainStyle }}\r\n```\r\n\r\nrenders correctly, but \r\n\r\n```vue\r\n:style=\"heightStyle\"\r\n```\r\n\r\ndoes not get updated.\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3091,3094,3096,3099],{"name":3092,"color":3093},"3.x","29bc7f",{"name":3029,"color":3095},"E99695",{"name":3097,"color":3098},"needs reproduction","FBCA04",{"name":3100,"color":3101},"⛔️ can be closed","484893",24200,"style of element not updated after hydration","2024-03-29T17:26:17Z","https://github.com/nuxt/nuxt/issues/24200",0.7184126,{"description":3108,"labels":3109,"number":3118,"owner":3018,"repository":3058,"state":3070,"title":3119,"updated_at":3120,"url":3121,"score":3122},"### Description\r\n\r\nThe code for specifying column width when there is no data is as follows and it is expected\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CUTable :empty-state=\"{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }\" :rows=\"people\"\r\n :columns=\"columns\">\r\n \u003Ctemplate #from-data=\"{ row }\">\r\n {{ row.from.value }}\r\n \u003C/template>\r\n \u003C/UTable>\r\n \u003CUNotifications>\r\n \u003Ctemplate #title=\"{ title }\">\r\n \u003Cspan v-html=\"title\" />\r\n \u003C/template>\r\n\r\n \u003Ctemplate #description=\"{ description }\">\r\n \u003Cspan v-html=\"description\" />\r\n \u003C/template>\r\n \u003C/UNotifications>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst toast = useToast()\r\nconst app = useNuxtApp()\r\n\r\nconst columns = [{\r\n key: \"id\",\r\n label: \"编号\",\r\n class: 'w-16'\r\n}, {\r\n key: \"from\",\r\n label: \"发方\",\r\n class: 'w-[180px]'\r\n}, {\r\n key: \"to\",\r\n label: \"接方\",\r\n class: 'w-[180px]'\r\n\r\n}, {\r\n key: \"type\",\r\n label: \"类型\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"value\",\r\n label: \"金额\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"hash\",\r\n label: \"哈希\",\r\n}\r\n]\r\n\r\nconst people = ref([\r\n /*{\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }*/\r\n])\r\n\r\n\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle>\r\na {\r\n color: #65a30d;\r\n font-weight: 700;\r\n font-size: 20px;\r\n}\r\n\r\n\r\n\u003C/style>\r\n```\r\n\r\n\r\n\r\nHowever, once there is data, it will be stretched open. How can I fix the header so that the content is partially hidden and drag the header to decide whether to hide or display it? This is too common in daily development and provides a good user experience\r\n\r\n\r\n```vue\r\nconst people = ref([\r\n {\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }\r\n])\r\n```\r\n\r\n",[3110,3113,3116],{"name":3111,"color":3112},"question","d876e3",{"name":3114,"color":3115},"closed-by-bot","ededed",{"name":3117,"color":3115},"stale",2092,"UTable column width","2025-06-18T09:06:18Z","https://github.com/nuxt/ui/issues/2092",0.7204612,{"description":3124,"labels":3125,"number":3128,"owner":3018,"repository":3129,"state":3070,"title":3130,"updated_at":3131,"url":3132,"score":3133},"https://volta.s3.fr-par.scw.cloud/Screenshot_2022_04_26_at_15_17_43_ca013064d2.mp4\n",[3126],{"name":3049,"color":3127},"ff281a",407,"nuxt.com","`CMD+B` in editor should not open the branch modal","2022-04-26T14:28:31Z","https://github.com/nuxt/nuxt.com/issues/407",0.72207147,{"description":3135,"labels":3136,"number":3128,"owner":3018,"repository":3032,"state":3070,"title":3137,"updated_at":3138,"url":3139,"score":3133},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-5c4p72?file=test/default.test.ts\n\n### Describe the bug\n\n`@nuxt/test-utils` doesn't work with `jest` if one is to set it up in a way that Nuxt 3 documentation recommends (https://nuxt.com/docs/getting-started/testing#setup):\r\n\r\n```\r\n ● Test suite failed to run\r\n\r\n Returning a Promise from \"describe\" is not supported. Tests must be defined synchronously.\r\n\r\n 1 | import { setup } from '@nuxt/test-utils';\r\n 2 |\r\n > 3 | describe('Smoke test (default)', async () => {\r\n | ^\r\n 4 | await setup({});\r\n 5 |\r\n 6 | test('it goes well', async () => {\r\n\r\n at ErrorWithStack (node_modules/jest-util/build/ErrorWithStack.js:23:13)\r\n at Object.\u003Canonymous> (test/default.test.ts:3:9)\r\n at [object Object]\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[],"Using `@nuxt/test-utils` with `jest` results in `Returning a Promise from \"describe\" is not supported`","2023-12-02T00:13:09Z","https://github.com/nuxt/test-utils/issues/407",["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fr6f48tYeEse4kB1UV15gS2y041Se11Lwl8NhPnYKdjg":-1},"/nuxt/nuxt.com/1252"]