\n\nShould:\n\u003Cimg width=\"694\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/155b8a32-2e58-44b0-becf-7646c39e40f7\" />\n\nOtherwise this leads to unexpected whitespaces. E.g. the following has class `mt-0` but still shows a significant margin:\n\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/af76a978-85cd-4ed4-9269-8dfca3c9686d\" />\n\n### Additional context\n\nTabs doesnt have this:\n\u003Cimg width=\"1040\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f5849972-7c7b-421a-9f9c-03d0a73f5572\" />",[3159,3162],{"name":3160,"color":3161},"bug","d73a4a",{"name":3163,"color":3164},"v3","49DCB8",3328,"ui","closed","NavigationMenu container is too high, creates whitespace","2025-03-28T17:38:47Z","https://github.com/nuxt/ui/issues/3328",0.697276,{"description":3173,"labels":3174,"number":3178,"owner":3149,"repository":3179,"state":3167,"title":3180,"updated_at":3181,"url":3182,"score":3183},"We should discuss what to show in that video, maybe a teasing video for the moment ?",[3175],{"name":3176,"color":3177},"design","00bd6f",630,"nuxt.com","[Projects] Video","2022-10-03T11:03:26Z","https://github.com/nuxt/nuxt.com/issues/630",0.7165627,{"description":3185,"labels":3186,"number":3192,"owner":3149,"repository":3149,"state":3167,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Environment\r\n\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.17.0`\r\n- Nuxt Version: `3.3.2`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `modules`, `css`, `build`, `vite`, `runtimeConfig`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nSee this [StackBlitz](https://stackblitz.com/edit/nuxt-starter-nrkwmz?file=pages/a.vue)\r\n\r\n### Describe the bug\r\n\r\nI understand `useAsyncData` to behave like `useState` but it can be initialized with an async function instead. (based on this discussion #17654). However, in my test it seems that `useAsyncState` is always reinitialized and not sharing the state.\r\n\r\nWhen I have two pages A and B which shall display the same state (for example a timestamp created at the state's initialization) I can use `useState` like this to get the desired effect, and navigating between the two pages does not reinitialize the state.\r\n```js\r\nexport const useTime = () => useState('time', () => (new Date()).getTime())\r\n```\r\n\r\nHowever, when using an async intialization function with `useAsyncData` the state is reinitialized with a new timestamp after navigating to the other page.\r\n```js\r\nexport const useTime = () => useAsyncData('time', async () => {\r\n await new Promise((resolve) => {\r\n setTimeout(() => resolve('resolved'), 1000)\r\n })\r\n return new Date().getTime()\r\n})\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3187,3190],{"name":3188,"color":3189},"3.x","29bc7f",{"name":3146,"color":3191},"E99695",19972,"`useAsyncData` does not share state","2023-03-29T10:12:09Z","https://github.com/nuxt/nuxt/issues/19972",0.72021776,{"description":3198,"labels":3199,"number":3210,"owner":3149,"repository":3149,"state":3167,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Describe the feature\r\n\r\nThe `useState` uses `useNuxtApp().payload.state` to preserve the value after server-side rendering and share the value across all components through a unique key. If `useState` is previously used with a key and if the key is the same, it will use the cached value regardless of whether it has a different `init` method or not. It is useful to use cached data when needed. However, in some cases, the value of `useState` needs to be redeclared with a new `init` method. It seems like the only way is creating unique key every time.\r\n\r\nIt would be nice to have just like `clearNuxtData` function to clear cached state value, so we don't have to think how to make a unique key when we want to change the value of `useState`\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3200,3203,3206,3207],{"name":3201,"color":3202},"enhancement","8DEF37",{"name":3204,"color":3205},"good first issue","fbca04",{"name":3188,"color":3189},{"name":3208,"color":3209},"🍰 p2-nice-to-have","0E8A16",21293,"Provide `clearNuxtState` function for `useState`","2023-06-09T21:22:23Z","https://github.com/nuxt/nuxt/issues/21293",0.7212971,{"description":3216,"labels":3217,"number":3220,"owner":3149,"repository":3179,"state":3167,"title":3221,"updated_at":3222,"url":3223,"score":3224},"",[3218],{"name":3201,"color":3219},"1ad6ff",611,"[Resources] Refactor showcases into a composable","2023-02-15T12:32:38Z","https://github.com/nuxt/nuxt.com/issues/611",0.73503053,{"description":3226,"labels":3227,"number":3220,"owner":3149,"repository":3150,"state":3167,"title":3231,"updated_at":3232,"url":3233,"score":3224},"I'm on v0.11.2 and it seems what `defineVitestConfig` wants and the type definition doesn't line up?\r\n\r\nIt wants an `InlineConfig` passed in directly in the typedef, but I'm having to do this:\r\n\r\n```js\r\nimport { defineVitestConfig } from \"nuxt-vitest/config\";\r\nimport type { InlineConfig } from \"vitest\";\r\n\r\nconst test: InlineConfig = {\r\n coverage: {\r\n all: true,\r\n branches: 87.5, // 7 / 8\r\n exclude: [\r\n \"node_modules\",\r\n \".nuxt\",\r\n \"app\",\r\n \"dist\",\r\n \"scripts\",\r\n \"*.config.ts\",\r\n \"**/types.ts\",\r\n \"**/*.tests.ts\",\r\n \"**/*.js\",\r\n \"**/*.mjs\",\r\n \"pages\",\r\n \"plugins\",\r\n \"app.vue\",\r\n ],\r\n },\r\n environment: \"happy-dom\",\r\n include: [\"**/*.tests.ts\"],\r\n};\r\n\r\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\r\n// @ts-ignore\r\nexport default defineVitestConfig({ test });\r\n```",[3228],{"name":3229,"color":3230},"vitest-environment","b60205","typecheck issues with defineVitestConfig?","2023-12-02T23:35:07Z","https://github.com/nuxt/test-utils/issues/611",{"description":3235,"labels":3236,"number":3239,"owner":3149,"repository":3149,"state":3167,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\n\nMy pc:\r\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.1.0`\r\n- Nitro Version: `2.0.0`\r\n- Package Manager: `yarn@1.22.15`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\nAlso happens in stackblitz:\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.1.0`\r\n- Nitro Version: `2.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-zrc5sy?file=components/StateGetter.vue\r\n\r\nIn this example there are two components that set the state, and one that reads the state.\r\nThe only difference between the setters is that useState is called after the awaited function in `StateSetterAfterAwait.vue` and before the awaited function in `StateSetterBeforeAwait.vue`.\r\n\r\nNotice that the `console.log` in `StateSetterAfterAwait.vue` is never reached, nor is the state set.\n\n### Describe the bug\n\nWhen `useState` is called after an awaited function in `useAsyncData`, execution halts.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3237,3238],{"name":3188,"color":3189},{"name":3146,"color":3191},18568,"Execution halts when useState is used after awaited function in useAsyncData","2023-03-02T08:32:26Z","https://github.com/nuxt/nuxt/issues/18568",0.7354792,{"description":3245,"labels":3246,"number":3249,"owner":3149,"repository":3149,"state":3167,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### Environment\n\nStackblitz\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-bqbjuq?file=pages%2Ftest1.vue,pages%2Findex.vue\r\nNavigate back and forth between test1 and index and notice new random numbers.\n\n### Describe the bug\n\nWhen using `useAsyncData` with a static key, I would expect data to only be fetched once. However when navigating back and forth, `useAsyncData` is called repeatedly.\r\n\r\nI would expect the data to stay the same when the key is the same.\r\nI have implemented my `useAsyncData` like so:\r\n```typescript\r\nconst { data, refresh } = useAsyncData('test', async () => {\r\n const number = Math.random();\r\n await new Promise((r) => setTimeout(r, 10));\r\n console.log({ number });\r\n return [...(data.value ?? []), [number]];\r\n});\r\n```\r\nThe reason I use the existing data.value is so we can load more data, when a user requests more. In this case by clicking a button. We use this pattern for pagination.\r\n\r\nOddly enough this doesn't happen when nothing is awaited in `useAsyncData`.\r\n\r\nAnother possibly unrelated bug is that the component crashes silently, when data is access before anything is awaited.\r\nSo this crashes:\r\n```typescript\r\nconst { data, refresh } = useAsyncData('test', async () => {\r\n const number = Math.random();\r\n console.log({data})\r\n await new Promise((r) => setTimeout(r, 10));\r\n console.log({ number });\r\n return [...(data.value ?? []), [number]];\r\n});\r\n```\r\nand this doesn't:\r\n```typescript\r\nconst { data, refresh } = useAsyncData('test', async () => {\r\n const number = Math.random();\r\n await new Promise((r) => setTimeout(r, 10));\r\n console.log({data})\r\n console.log({ number });\r\n return [...(data.value ?? []), [number]];\r\n});\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3247,3248],{"name":3188,"color":3189},{"name":3146,"color":3191},19027,"Data is refetched when using same key in useAsyncData on client side navigation","2023-02-14T15:21:46Z","https://github.com/nuxt/nuxt/issues/19027",0.7363024,{"description":3255,"labels":3256,"number":3269,"owner":3149,"repository":3149,"state":3167,"title":3270,"updated_at":3271,"url":3272,"score":3273},"### Describe the feature\n\nCurrently, we send back all states (`useState`) from island within the island response.\r\n\r\nIt currently doesn't have any impact on the app calling the island.\r\n\r\nThere's 2 solutions:\r\n- we keep it and fix the bug where the state isn't applied to the current App\r\n - ⚠️What would happen if we have 2 island located in the same component ? Both are making a promise so the user cannot know what will happen (in which order useState will be set)\r\n- we completly remove it and reduce the json payload for island responses.\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3257,3258,3259,3260,3263,3266],{"name":3204,"color":3205},{"name":3188,"color":3189},{"name":3160,"color":3161},{"name":3261,"color":3262},"🔨 p3-minor","FBCA04",{"name":3264,"color":3265},"performance","E84B77",{"name":3267,"color":3268},"server components","839413",26579,"Remove or fix `state` from islands components","2024-04-20T01:56:58Z","https://github.com/nuxt/nuxt/issues/26579",0.7366997,["Reactive",3275],{},["Set"],["ShallowReactive",3278],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f908A4lgaOiu3sXNpCnNzlCViP-_Mzix3jhxX475N_Gw":-1},"/nuxt/test-utils/480"]