",[2887,2890],{"name":2888,"color":2889},"question","d876e3",{"name":2871,"color":2872},3947,"Unexpected drawer behavior when dragging content area (jumpy collapse & horizontal scroll flickering)","2025-04-21T09:17:02Z","https://github.com/nuxt/ui/issues/3947",0.70521563,{"description":2897,"labels":2898,"number":2905,"owner":2877,"repository":2877,"state":2879,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### Describe the feature\r\n\r\n### The problem\r\n\r\nSometimes we need a `ref` that works exactly as `ref`, have full semantics and behavior of `ref`, but still works fine with SSR.\r\n\r\nIn the [docs](https://nuxt.com/docs/getting-started/state-management) `useState` is advertised as \"an SSR-friendly `ref` replacement\", which is actually not true as `useState` has different semantics and behavior than `ref` in addition to its SSR-friendliness.\r\n\r\nTo quote the docs:\r\n> [useState](https://nuxt.com/docs/api/composables/use-state) is an SSR-friendly [ref](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.\r\n\r\nWhat I need is an analogue to `ref` where only the first part of `useState` description (\"Its value will be preserved after server-side rendering\") is true, but not the second (\"shared across all components using a unique key\").\r\n\r\nI.e. that `ref` should be:\r\n1. Initialized **every time** when `script setup` is executed (`init` function of `useState` is not executed on any client-side navigation except the 1st).\r\n2. Preserved between SSR and client-side setup (i.e. hydrated, just like `useState` does).\r\n3. Not shared between component instances or other components (unlike `useState`).\r\n\r\n### The workaround\r\n\r\nCurrently I use workaround like this:\r\n\r\n```ts\r\nconst nuxtApp = useNuxtApp()\r\nconst componentId = useId()\r\nconst myRef = useState(componentId, () => null)\r\nif (!nuxtApp.isHydrating) {\r\n // Called by SSR (initial page load), but also on each client-side navigation too, just as normal ref(generateInitialValue()) would.\r\n myRef.value = generateInitialValue()\r\n}\r\nonUnmounted(() => clearNuxtState(componentId))\r\n```\r\n\r\nI think with the workaround above `myRef` behaves identical to a usual `Ref`, but preserves the value generated by `generateInitialValue()` called from SSR if the component was first rendered by SSR, instead of generating a new initial value (that could be different from SSR-generated value) when the component is rendered on the client.\r\n\r\nAlso, `myRef` is not shared with anyone (even different instances of the same component), just like normal `ref`.\r\n\r\nAnd it's initialization will be performed on each call to `script setup` function, just like normal `ref`. Unlike `useState()`, that calls `init` only 1 time, then `init` is never called again until full server-side reload of the page, that is not what you expect from \"ref replacement\".\r\n\r\nThe downside of this workaround is that on every client-side navigation a new key is created in `useState` data keys storage. So it is a memory leak in this case, as the semantic of `ref` allows to not preserve the value between navigations. It's just a side-effect of using `useState` and `useId` under the hood. I added `onUnmounted(() => clearNuxtState(componentId))`, but this just removes the values, not the keys. Ideally these keys should be removed right after hydration is finished.\r\n\r\n### The proposition\r\n\r\nWhat I want instead is a built-in function that will allow me to write just this:\r\n\r\n```ts\r\nconst myRef = useSsrFriendlyRef(() => generateInitialValue())\r\n```\r\n(the name of the function is discussable, of course 😂)\r\n\r\n### The usefulness\r\n\r\nSuch SSR-friendly `ref` is useful, for example, to generate an initial data to use it as parameters of API called by `useFetch`. These parameters need to be stable between SSR and client-side calling to `useFetch` to make generated fetch key be stable and hydration work.\r\n\r\nOne case when I needed this SSR-friendly `ref` is a component that displays a graph with some data. To load these data from the API the component need to pass a range of dates (e.g. `GET /api/data?from=2024-08-13&to=2024-09-13`). The default (initial) range is \"from 30 days ago to the current date\". After the component is rendered, user should be able to change the range. But on the initial render `useFetch` requests the data for the last 30 days. To make it work properly we need this initial date range to be initialized only once per navigation, but still to be initialized every time the component's setup is called (i.e. the changes user made to `from` and `to` dates should be forgotten if user navigates away from the route and then navigates back). All this behavior is perfectly covered by `ref` except the SSR part. With `ref` the current date could be different in SSR rendered component and client-side rendered component, so the initial date range is different, the `useFetch` key is different, the `useFetch` response hydration doesn't work and `useFetch` is executed 2nd time on the client.\r\n\r\nAnyway, it is just one use-case (maybe not the perfect). The idea of this feature-request is not covering just one use-case, but having a standard mechanism to create SSR-friendly `ref`s, with full semantic of normal `ref`, unlike `useState`, that certainly helpful when you need a shared state, but gets in the way when you need a private state, just like with `ref`, but stable between SSR and client-side rendering.\r\n\r\nI remember `useId()` was introduced not long time ago to cover just a specific case of html element `id` generation (and similar cases). I think it solves similar problem, but in less generic way (you can't use your own initializer, `useId()` always returns a \"random\" string).\r\n\r\nP.S. I tried to search for similar questions/proposition everywhere but didn't find anything. Maybe it's just my skill of creating a correct search requests. :) Anyway, if this idea was already discussed, please point me at it. Honestly, I'm very surprised that it was never discussed, as it is not the first time when I personally needed this feature, just the 1st time when I decided to create a feature request.\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n _I would like to, but I'm afraid I will not be able. I tried to understand the implementation of `useId` but it looks like pure black magic to me._\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).",[2899,2902],{"name":2900,"color":2901},"enhancement","8DEF37",{"name":2903,"color":2904},"discussion","538de2",28984,"Real SSR-friendly Ref","2024-09-16T17:51:42Z","https://github.com/nuxt/nuxt/issues/28984",0.7126868,{"description":2911,"labels":2912,"number":2916,"owner":2877,"repository":2877,"state":2879,"title":2917,"updated_at":2918,"url":2919,"score":2920},"### Describe the feature\n\nI was wondering about the different behavior of `ref()` in a composables file outside of composable function versus the usage in vue component, composable function or pinia for example.\r\n\r\nThe best practice documented here https://nuxt.com/docs/getting-started/state-management which describes `const ref = () => useState(\"key\", () => \"initValue\")` is nice but could be smarter without the additional step to execute this function if i want to use the underlaying ref value.\r\n\r\nuseUseStateSampleComposable.ts - Showcase for the laborious usage of `useState()`\r\n```js\r\nconst useStateFn = () => useState(\"key\", () => \"initValue\");\r\n\r\nexport function useRefSampleComposable(newRefValue: string) {\r\n const refValue = useStateFn() // i hate this additional call\r\n refValue.value = newRefValue;\r\n \r\n return {\r\n refValue\r\n };\r\n}\r\n```\r\n\r\nSo i've built something like this to get an easy workaround where i do not have to execute a function to get the underlaying ref value.\r\n\r\nuseBetterRef.ts - Example solution for doing a \"better ref\".\r\n```js\r\nconst counter = useState(\"useRefCounter\", () => 0); // just for having a unqiue counter id\r\n\r\nexport function useBetterRef(value: string) {\r\n const key = `useRef:${counter.value++}`;\r\n return computed({\r\n get: () => (() => useState(key, () => value))().value,\r\n set: (value) => (useState(key).value = value),\r\n });\r\n}\r\n```\r\n\r\nuseBetterRefSampleComposable.ts - Showcase for the usage of useBetterRef\r\n```js\r\nconst refValue = useBetterRef(\"initValue\");\r\n\r\nexport function useBetterRefSampleComposable(newRefValue: string) {\r\n refValue.value = newRefValue;\r\n \r\n return {\r\n refValue\r\n };\r\n}\r\n```\n\n### Additional information\n\n- [ ] 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).",[2913],{"name":2914,"color":2915},"pending triage","E99695",25911,"ref vs. useState in composables file outside of composable function","2024-06-30T11:05:40Z","https://github.com/nuxt/nuxt/issues/25911",0.7180287,{"description":2922,"labels":2923,"number":2924,"owner":2877,"repository":2925,"state":2926,"title":2927,"updated_at":2928,"url":2929,"score":2930},"Hey, \r\nToday I used [patch-package](https://github.com/ds300/patch-package) to patch `@nuxt/test-utils@3.12.0` for the project I'm working on.\r\n\r\nMain branch already has these changes and it fixes issue where I am not able to import from `@nuxt/test-utils/playwright` due to missing types. \r\n```\r\nimport { expect, test } from '@nuxt/test-utils/playwright'\r\n```\r\n\r\nHere is the diff that solved my problem:\r\n```diff\r\ndiff --git a/node_modules/@nuxt/test-utils/package.json b/node_modules/@nuxt/test-utils/package.json\r\nindex 2bc5c2e..e0d7b15 100644\r\n--- a/node_modules/@nuxt/test-utils/package.json\r\n+++ b/node_modules/@nuxt/test-utils/package.json\r\n@@ -23,6 +23,7 @@\r\n \"dist\",\r\n \"config.d.ts\",\r\n \"e2e.d.ts\",\r\n+ \"playwright.d.ts\",\r\n \"experimental.d.ts\",\r\n \"module.d.ts\",\r\n \"runtime.d.ts\",\r\ndiff --git a/node_modules/@nuxt/test-utils/playwright.d.ts b/node_modules/@nuxt/test-utils/playwright.d.ts\r\nnew file mode 100644\r\nindex 0000000..1b71747\r\n--- /dev/null\r\n+++ b/node_modules/@nuxt/test-utils/playwright.d.ts\r\n@@ -0,0 +1 @@\r\n+export * from './dist/playwright'\r\n```\r\n\r\nBut as I can see these changes are already on main branch. Is it possible to create minor release / tag in order to fix it?\r\nAs you can see both playwright.d.ts and `files` in`package.json` are missing from 3.12.0 release.\r\n\r\n\u003Cimg width=\"965\" alt=\"Screenshot 2024-04-05 at 09 16 25\" src=\"https://github.com/nuxt/test-utils/assets/34317830/698aa01f-d67e-498f-9c0e-b2347031995f\">\r\n\r\n",[],807,"test-utils","closed","Missing types for @nuxt/test-utils/playwright","2024-04-17T10:00:28Z","https://github.com/nuxt/test-utils/issues/807",0.45165658,{"description":2932,"labels":2933,"number":2924,"owner":2877,"repository":2878,"state":2926,"title":2938,"updated_at":2939,"url":2940,"score":2930},"### Description\n\nI know you are working on ui-pro, but would be interested in having this as a feature, maybe a scroll box component? \n\nhttps://nextui.org/docs/components/scroll-shadow\n\n### Additional context\n\n_No response_",[2934,2937],{"name":2935,"color":2936},"feature","A27AF6",{"name":2871,"color":2872},"[ScrollArea] Implement component","2025-04-22T14:19:32Z","https://github.com/nuxt/ui/issues/807",{"description":2942,"labels":2943,"number":2944,"owner":2877,"repository":2945,"state":2926,"title":2946,"updated_at":2947,"url":2948,"score":2949},"For now, links in the Community section of the homepage are opening external links without _blank due to the `navigateTo()` helper used for it. Proposal:\n\n- Remove the click handler on the card and use a classic NuxtLink only on the number inside the card. [Dev]\n- Add an \"outgoing link\" icon next to the number to signal an outgoing navigation [Design]",[],974,"nuxt.com","[Home Community] External links","2022-11-21T14:55:47Z","https://github.com/nuxt/nuxt.com/issues/974",0.65757346,{"description":2951,"labels":2952,"number":2944,"owner":2877,"repository":2925,"state":2926,"title":2956,"updated_at":2957,"url":2958,"score":2949},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.15.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.0.0\n- Builder: -\n- User Config: - \u003C-- This isn't accurate, I have changed things, unsure if nuxi is just unable to pick it up\n- Runtime Modules: - \u003C-- This isn't accurate, I have modules, unsure if nuxi is just unable to pick it up\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nI am unable to provide a reproduction for 2 main reasons:\n1. This is part of a production app, and I am willing to share it happening in real time privately \n2. It's inconsistent, as on Windows it fails completely and on Ubuntu it fails to run the e2e tests, so I can't even confirm it locally with a different configuration (I can provide the error it provides on Windows which causes it to abort even the initial test screen)\n\nI can, however, provide the overall configuration and a sample of the tests:\nnuxt.config.ts modules:\n```ts [nuxt.config.ts]\nmodules: [\"@nuxt/content\",\"@nuxt/ui\", \"@pinia/nuxt\", \"@nuxt/image\", '@nuxt/test-utils/module', \"@nuxtjs/i18n\", \"@nuxtjs/seo\",\n\t\t\"@nuxtjs/turnstile\", \"nuxt-security\", \"@nuxt/scripts\", \"@nuxt/fonts\"],\n```\nvitest.config.mts:\n```ts\nimport { defineVitestConfig } from '@nuxt/test-utils/config'\nexport default defineVitestConfig({\n\ttest:{\n\t\tenvironment:'nuxt',\n\t\thookTimeout:50000\n\t}\n})\n```\n\nSample of test/e2e/e2e.nuxt.test.ts:\n```ts\nimport { expect, describe, it } from \"vitest\"\nimport {setup, $fetch, fetch, createPage} from \"@nuxt/test-utils/e2e\"\ndescribe(\"app\", async () => {\n\tawait setup({\n\t\tserver:true,\n\t\trunner: 'vitest',\n\t\tbuild:true,\n\t\tsetupTimeout:300000\n\t}\n\t)\n describe(\"images\", async () => {\n\t\tit(\"should return correct data for existent images\", async () => {\n\t\t\tconst {body, status, headers} = await fetch('/images/image.webp')\n\t\t\texpect(status).toBe(200)\n\t\t\texpect(headers.get(\"Content-Type\")).toBe(\"image/webp\")\n\t\t})\n\t\tit(\"should return 404 for non-existent images\", async () => {\n\t\t\tconst {body, status} = await fetch('/images/nonExistent.jpg')\n\t\t\texpect(status).toBe(404)\n\t\t})\n\t})\n})\n```\n\n### Describe the bug\n\nThe cucumber test runner appears to execute the tests despite runner option of the `setup` of e2e to 'vitest' (or trying to use the default). Maybe because of this and maybe because of a different, unseen cause, it simply breaks all e2e tests with the error I provided in the Logs section.\n\nI believe this is part of a bigger issue which I have not unearthed yet that could also explain the respective failures on both environments\n\n### Additional context\n\nAttempting to upgrade/reinstall the project's deps does not appear to help.\nUnit tests are not affected by it, it affects only those that depend on the `setup` from the e2e section.\n\n### Logs\n```\nTypeError: The \"chunk\" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined\n ❯ _build node_modules/nitropack/dist/nitro.mjs:2658:22\n ❯ node_modules/nuxt/dist/index.mjs:3630:5\n ❯ build node_modules/nuxt/dist/index.mjs:5778:3\n ❯ buildFixture node_modules/@nuxt/test-utils/dist/shared/test-utils.CaqvQLs_.mjs:121:3\n 119| const { After, AfterAll, Before, BeforeAll } = await import('@cucumber/cucumber');\n 120| BeforeAll({ timeout: hooks.ctx.options.setupTimeout }, hooks.setup);\n 121| Before(hooks.beforeEach);\n | ^\n 122| After(hooks.afterEach);\n 123| AfterAll(hooks.afterAll);\n ❯ setup2 node_modules/@nuxt/test-utils/dist/shared/test-utils.CaqvQLs_.mjs:183:7\n```",[2953],{"name":2954,"color":2955},"needs reproduction","DE7793","tests are broken due to cucumber runner or don't work","2024-12-03T20:51:58Z","https://github.com/nuxt/test-utils/issues/974",{"description":2960,"labels":2961,"number":2963,"owner":2877,"repository":2964,"state":2926,"title":2965,"updated_at":2966,"url":2967,"score":2968},"Thought this issue was related to my project, but I was able to reproduce it, sounds weird but this font won't work on a production build - https://fonts.google.com/specimen/DM+Serif+Display\r\n\r\nI am using the font by mentioning it in my tailwind config \r\n\r\n```ts\r\nimport type { Config } from \"tailwindcss\";\r\n\r\nexport default \u003CPartial\u003CConfig>>{\r\n theme: {\r\n fontFamily: {\r\n sans: [\r\n \"DM Sans\",\r\n \"Avenir Next\",\r\n \"Roboto\",\r\n \"-apple-system\",\r\n \"BlinkMacSystemFont\",\r\n '\"Segoe UI\"',\r\n \"Ubuntu\",\r\n '\"Helvetica Neue\"',\r\n \"Arial\",\r\n '\"Noto Sans\"',\r\n \"sans-serif\",\r\n '\"Apple Color Emoji\"',\r\n '\"Segoe UI Emoji\"',\r\n '\"Segoe UI Symbol\"',\r\n '\"Noto Color Emoji\"',\r\n ],\r\n mono: [\r\n \"Cascadia Code\",\r\n \"ui-monospace\",\r\n \"SFMono-Regular\",\r\n \"Menlo\",\r\n \"Monaco\",\r\n \"Consolas\",\r\n \"Liberation Mono\",\r\n \"Courier New\",\r\n \"monospace\",\r\n ],\r\n display: [\"DM Serif Display\", \"Inter\", \"sans-serif\"],\r\n },\r\n },\r\n plugins: [require(\"@tailwindcss/typography\")],\r\n};\r\n```\r\n\r\nThe first font `DM Sans` is loads correctly, but the display font wont, throws a 404 in production.\r\n\r\nHere's a reproduction - https://github.com/fayazara/nuxt-font-repro\r\n\r\nDev environment screenshot \r\n\r\n\r\n\r\nProduction screenshot\r\n",[2962],{"name":2868,"color":2869},122,"fonts","This font won't work on production: DM Serif Display","2024-05-03T08:11:09Z","https://github.com/nuxt/fonts/issues/122",0.66758853,{"description":2970,"labels":2971,"number":2974,"owner":2877,"repository":2945,"state":2926,"title":2975,"updated_at":2976,"url":2977,"score":2978},"\n\nEx: https://dev.nuxt.com/community/repositories?organization=nuxtlabs&sortBy=stargazerCount",[2972],{"name":2868,"color":2973},"ff281a",552,"Fix title in subnavbar in community section","2022-05-23T08:57:57Z","https://github.com/nuxt/nuxt.com/issues/552",0.66962063,["Reactive",2980],{},["Set"],["ShallowReactive",2983],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpF1T8UVJxuDbbvgG5J6giO4hFPNXFbRo7j6robBUIHA":-1},"/nuxt/nuxt.com/807"]