`\n\nUnable to use stroke-width does not take effect",[],364,"nuxt","icon","open","Unable to use stroke-width does not take effect","2025-03-04T02:48:19Z","https://github.com/nuxt/icon/issues/364",0.62453055,{"description":1993,"labels":1994,"number":1998,"owner":1985,"repository":1985,"state":1987,"title":1999,"updated_at":2000,"url":2001,"score":2002},"Hello,\n\nI found a Nuxt app example using GSAP that attempts to implement a hook after a page transition, with a shared ref across the whole application.\nThe idea is to have something like a lifecycle hook similar to 'page:transition:finish' (onAfterLeave event) but instead with 'page:transition:after' (onAfterEnter event).\nGSAP Page Transitions example: https://stackblitz.com/edit/nuxt-starter-bthjlg?file=composables%2Ftransition-composable.js\n\nThe GSAP dev implemented a composable like this:\n```\nconst transitionState = reactive({\n transitionComplete: false,\n});\n\nexport const useTransitionComposable = () => {\n const toggleTransitionComplete = (value) => {\n transitionState.transitionComplete = value;\n };\n\n return {\n transitionState,\n toggleTransitionComplete,\n };\n}\n```\n\nIf I understand the Nuxt documentation correctly (https://nuxt.com/docs/getting-started/state-management), this approach should be avoided.\n\nFirst question:\nIs this behavior the same across all rendering modes? (SWR, ISR, SSR, SSG, SPA)\n\nSecond question:\nFollowing the documentation, I ended up with a composable like this:\n\n```\nconst useTransitionCompleteState = () => useState\u003Cboolean>('isTransitionComplete', () => shallowRef(false))\nexport default = () => {\n const isTransitionComplete = useTransitionCompleteState()\n const toggleTransitionComplete = (value: boolean) => {\n isTransitionComplete.value = value\n };\n\n return {\n transitionState: readonly(isTransitionComplete),\n toggleTransitionComplete,\n }\n}\n```\n\nLast question:\nThe following implementation is more concise and works on my end. Is it a good approach, or does it introduce issues? What’s the difference?\n\n```\nexport default = () => {\n const isTransitionComplete = useState\u003Cboolean>('isTransitionComplete', () => shallowRef(false))\n const toggleTransitionComplete = (value: boolean) => {\n isTransitionComplete.value = value\n }\n\n return {\n transitionState: readonly(isTransitionComplete),\n toggleTransitionComplete,\n }\n}\n```\n\nThanks in advance for your help! :)",[1995],{"name":1996,"color":1997},"pending triage","E99695",30968,"Managing page transition state in Nuxt","2025-02-12T16:18:41Z","https://github.com/nuxt/nuxt/issues/30968",0.72003555,{"description":2004,"labels":2005,"number":2012,"owner":1985,"repository":1985,"state":1987,"title":2013,"updated_at":2014,"url":2015,"score":2016},"### 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).",[2006,2009],{"name":2007,"color":2008},"enhancement","8DEF37",{"name":2010,"color":2011},"discussion","538de2",28984,"Real SSR-friendly Ref","2024-09-16T17:51:42Z","https://github.com/nuxt/nuxt/issues/28984",0.7432275,{"description":2018,"labels":2019,"number":2026,"owner":1985,"repository":2027,"state":2028,"title":2029,"updated_at":2030,"url":2031,"score":2032},"at the moment redeploys on cloud providers with `experimental.buildCache` result in font files not being included in published site\r\n\r\n",[2020,2023],{"name":2021,"color":2022},"bug","d73a4a",{"name":2024,"color":2025},"good first issue","7057ff",266,"fonts","closed","support for nuxt `experimental.buildCache`","2024-09-23T14:18:03Z","https://github.com/nuxt/fonts/issues/266",0.6476921,{"description":2034,"labels":2035,"number":2041,"owner":1985,"repository":2042,"state":2028,"title":2043,"updated_at":2044,"url":2045,"score":2046},"### 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",[2036,2038],{"name":2007,"color":2037},"a2eeef",{"name":2039,"color":2040},"v3","49DCB8",2689,"ui","[Table] reactive columns for auto-generated UTable columns","2024-11-21T13:11:03Z","https://github.com/nuxt/ui/issues/2689",0.65822196,{"description":2048,"labels":2049,"number":2052,"owner":1985,"repository":2053,"state":2028,"title":2054,"updated_at":2055,"url":2056,"score":2057},"",[2050],{"name":2021,"color":2051},"ff281a",490,"nuxt.com","[Content] Fix blog articles sort by date","2022-05-13T16:00:22Z","https://github.com/nuxt/nuxt.com/issues/490",0.7072109,{"description":2059,"labels":2060,"number":2065,"owner":1985,"repository":2027,"state":2028,"title":2066,"updated_at":2067,"url":2068,"score":2069},"Hi guys,\r\n\r\nThis package seems just what my project needs! \r\n\r\nUnfortunately, adobe fonts do no load. \r\nN.B> Adobe doesn't load in the playground either...\r\n\r\nHope it will be sorted,\r\n\r\nkind regards,\r\n\r\nMarco",[2061,2062],{"name":2021,"color":2022},{"name":2063,"color":2064},"provider","1161A4",187,"Adobe doesn't load","2024-07-04T05:50:31Z","https://github.com/nuxt/fonts/issues/187",0.7085402,{"description":2071,"labels":2072,"number":2065,"owner":1985,"repository":2076,"state":2028,"title":2077,"updated_at":2078,"url":2079,"score":2069},"### 📚 What are you trying to do?\n\ni use ScriptGoogleMaps component and i want to use LatLng object for set marker in google maps .\r\ni tried to pass this object to options.center and query but its not working.\r\nAm I using it wrong ?\n\n### 🔍 What have you tried?\n\n_No response_\n\n### ℹ️ Additional context\n\n_No response_",[2073],{"name":2074,"color":2075},"help wanted","008672","scripts","googlemaps latlng","2024-08-22T09:11:49Z","https://github.com/nuxt/scripts/issues/187",{"description":2081,"labels":2082,"number":2092,"owner":1985,"repository":1985,"state":2028,"title":2093,"updated_at":2094,"url":2095,"score":2096},"Hi, Is it possible to check to and from inside a transition object? I want to use different transitions depending on where the user came from and are going.\r\n\r\nWhat is the suggested way of doing this? Can I keep all my transitions in some folder and export/import them, using the transition function to check which one to use?\r\n\r\nThis is a transition i'm using inside one of my page components:\r\n```\r\n transition: {\r\n mode: 'out-in',\r\n css: false,\r\n enter (el, done) {\r\n let tl = new TimelineMax\r\n let SplitLines = new SplitText('.js-lines', {type: \"words\" })\r\n let lines = SplitLines.words\r\n TweenMax.set('.js-lines', { perspective: 800 })\r\n\r\n function kill () {\r\n SplitLines.revert()\r\n done()\r\n }\r\n\r\n tl.staggerFrom(lines, 1.5, {\r\n opacity: 0,\r\n yPercent: 50,\r\n scale: 0.85,\r\n rotationX: -90,\r\n transformOrigin: \"center bottom\",\r\n ease: Expo.easeOut\r\n }, 0.075, \"+=0\", kill)\r\n },\r\n leave (el, done) {\r\n TweenMax.to(el, 0.5, { autoAlpha: 0, onComplete: done })\r\n }\r\n }\r\n```\r\n\r\nWould something like this be possible?\r\n\r\n```\r\nexport const fromPageOne = {\r\n mode: 'out-in',\r\n css: false,\r\n enter () {\r\n console.log('from page one')\r\n done()\r\n }\r\n}\r\n\r\nexport const fromPageTwo = {\r\n mode: 'out-in',\r\n css: false,\r\n enter () {\r\n console.log('from page two')\r\n done()\r\n }\r\n}\r\n\r\nexport const toPagOne = {\r\n mode: 'out-in',\r\n css: false,\r\n leave () {\r\n console.log('to page one')\r\n done()\r\n }\r\n}\r\n\r\nexport const toPageTwo = {\r\n mode: 'out-in',\r\n css: false,\r\n leave () {\r\n console.log('to page two')\r\n done()\r\n }\r\n}\r\n\r\n```\r\n\r\nthen in the page component:\r\n```\r\ntransition (to, from) {\r\n return from.name == 'index' ? fromPageOne : fromPageTwo\r\n return to.name == 'index' ? toPageOne : toPageTwo\r\n}\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1747\">#c1747\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2083,2086,2089],{"name":2084,"color":2085},"question","cc317c",{"name":2087,"color":2088},"stale","ffffff",{"name":2090,"color":2091},"2.x","d4c5f9",1960,"Checking to/from inside transition object?","2023-01-18T15:42:54Z","https://github.com/nuxt/nuxt/issues/1960",0.72697264,{"description":2098,"labels":2099,"number":2109,"owner":1985,"repository":2053,"state":2028,"title":2110,"updated_at":2111,"url":2112,"score":2113},"- [ ] Add nuxt.new page in this page\n- [ ] Use new design made by @SarahM19 ",[2100,2103,2106],{"name":2101,"color":2102},"design","00bd6f",{"name":2104,"color":2105},"marketing","f5c828",{"name":2107,"color":2108},"dev","018415",1342,"Templates Page","2023-10-10T14:44:52Z","https://github.com/nuxt/nuxt.com/issues/1342",0.727668,["Reactive",2115],{},["Set"],["ShallowReactive",2118],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"YrygtM0MGbgYK_Pjy4cxcerBaqZqgoW3HHp5HXlLZ8M":-1},"/nuxt/icon/355"]