` component, but it doesn’t work.\n",[],365,"icon","Is there a way to change the viewBox attribute of an SVG element?","2025-03-05T19:09:39Z","https://github.com/nuxt/icon/issues/365",0.74711186,{"description":2915,"labels":2916,"number":2919,"owner":2874,"repository":2874,"state":2876,"title":2920,"updated_at":2921,"url":2922,"score":2923},"### 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).",[2917,2918],{"name":2868,"color":2896},{"name":2898,"color":2899},28984,"Real SSR-friendly Ref","2024-09-16T17:51:42Z","https://github.com/nuxt/nuxt/issues/28984",0.7532966,{"description":2925,"labels":2926,"number":2930,"owner":2874,"repository":2874,"state":2876,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v21.7.1\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.9.3\r\n- Package Manager: npm@10.5.0\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/TurtleKwitty/NuxtPluginProvideBug\r\n\r\n### Describe the bug\r\n\r\nThere is an unexpected interaction between plugin provided refs and local redefinitions with `const {$data} = useNuxtApp()`\r\n\r\nWhen using the global object in a template a ref holding undefined or null will return {} and `.value` is required to make it behave correctly\r\nWhen redefining it locally with `const {$data} = useNuxtApp()` then it is correctly returned as undefined or null\r\n\r\nI will attempt to take a look if I can hunt down the cause of this bugged interaction but do not currently have a PR.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2927],{"name":2928,"color":2929},"documentation","5319e7",26239,"Template behaves differently when redefining $data ","2024-06-30T11:05:16Z","https://github.com/nuxt/nuxt/issues/26239",0.75933313,{"description":2936,"labels":2937,"number":2947,"owner":2874,"repository":2948,"state":2876,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Environment\n\nNuxt UI pro v 3.1.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/input-menu#control-search-term\n\n### Description\n\nHello, \n\nI am reopening an issue based on https://github.com/nuxt/ui/issues/3782\n\nI still have an issue on the InputMenu that filters with the default value.\n\nAs a reproduction : we can see the same behavior I am facing in the documentation : https://ui.nuxt.com/components/input-menu#control-search-term . \n\n1) => The first click on InputMenu shows only the seacherd term (here Backlog)\n2) => If I close the popover and reopen it a second time, it shows the entire list.\n\nI tried the :reset-search-term-on-select=\"false\" , it allows to display the entire list at 1st click but it leads to not showing the default selected value (the placeholder is displayed).\n\nActually, I am looking to display the entire list at first click, even if a value is already selected.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2938,2941,2944],{"name":2939,"color":2940},"bug","d73a4a",{"name":2942,"color":2943},"v3","49DCB8",{"name":2945,"color":2946},"triage","ffffff",3993,"ui","InputMenu Clear Search on Select at first click","2025-04-27T12:37:04Z","https://github.com/nuxt/ui/issues/3993",0.76060843,{"description":2954,"labels":2955,"number":2956,"owner":2874,"repository":2909,"state":2876,"title":2957,"updated_at":2958,"url":2959,"score":2960},"Hi,\nI have a Nuxt Layer with `AppMenu.vue`, the menu items are defined inside the `app.config.ts` of the child app which extends from the Layer like so:\n```js\nexport default defineAppConfig({\n menu: {\n primary: [\n {\n label: 'Dashboard',\n icon: 'material-symbols:dashboard-2-outline',\n to: '/',\n },\n ],\n },\n});\n```\nI noticed when using `clientBundle: { scan: true }` that icons inside the `app.config.ts` were not bundled.\nI think all Nuxt files should be scanned by default, `.js` and `.ts` included, not just `.vue` files.",[],358,"Scan doesn't work when extending a Layer","2025-02-18T16:53:31Z","https://github.com/nuxt/icon/issues/358",0.76203,{"description":2962,"labels":2963,"number":2966,"owner":2874,"repository":2948,"state":2967,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.2.2\n- Builder: -\n- User Config: devtools, experimental, ssr, modules, runtimeConfig, css, future, compatibilityDate, app, ogImage, image, icon, colorMode, seo, apiParty, security, lodash, zodI18n, i18n, vue, routeRules, $development, $production, $test\n- Runtime Modules: magic-regexp/nuxt@0.8.0, nuxt-api-party@2.1.2, nuxt-lodash@2.5.3, nuxt-security@2.1.5, nuxt-zod-i18n@1.11.5, @vueuse/nuxt@12.5.0, @pinia/nuxt@0.9.0, @nuxtjs/i18n@9.0.0, @nuxtjs/seo@2.1.1, @nuxt/ui@3.0.0-alpha.12, @nuxt/image@1.9.0, @nuxt/eslint@1.0.0, @nuxt/scripts@0.9.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nYou can check it for example here: https://ui3.nuxt.dev/components/navigation-menu#theme when you click the link to check out the source code of the theme file.\n\n### Description\n\nWhen trying to navigate to the source code of a component's theme (like `NavigationMenu`), the link is broken.\nI saw that it's because this\nhttps://github.com/nuxt/ui/blob/69bc686efd657e3cbf8e9394649f0d5f4c4af434/docs/app/components/content/ComponentTheme.vue#L18\nbreaks this\nhttps://github.com/nuxt/ui/blob/69bc686efd657e3cbf8e9394649f0d5f4c4af434/docs/app/components/content/ComponentTheme.vue#L113\nso I think we should either rename the theme files to be camelCase (not worth the effort imho) or just easily do something like this:\n```ts\nconst name = props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? ''\nconst camelName = camelCase(name)\n```\nand use the `camelName` where needed.\n\nI can submit a PR for that if you prefer.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2964,2965],{"name":2939,"color":2940},{"name":2942,"color":2943},3222,"closed","Links to components' theme source code are broken","2025-02-02T10:38:55Z","https://github.com/nuxt/ui/issues/3222",0.7120837,{"description":2973,"labels":2974,"number":2976,"owner":2874,"repository":2948,"state":2967,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### Environment\n\nx\n\n### Version\n\nx\n\n### Reproduction\n\nx\n\n### Description\n\nWhen navigating to the Nuxt UI v2 homepage from another page within the app, it does not display and throws an error. However, if the page is reloaded directly, it loads correctly.\n\n#### Console error:\nA JavaScript error related to .map appears in the console.\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2975],{"name":2939,"color":2940},3541,"docs: v2 homepage does not display when navigating internally","2025-03-18T14:27:58Z","https://github.com/nuxt/ui/issues/3541",0.73604935,["Reactive",2982],{},["Set"],["ShallowReactive",2985],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFu_rmDdSlnmX6pl2VEhZ4S2I9EDfkj9BJymEkn0dSs4":-1},"/nuxt/ui/2284"]