\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.74387914,{"description":2875,"labels":2876,"number":2886,"owner":2867,"repository":2867,"state":2869,"title":2887,"updated_at":2888,"url":2889,"score":2890},"## Environment\r\n\r\n```\r\n- Operating System: `MacOs`\r\n- Node Version: `v19.3.0`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n```\r\n\r\n## Describe the issue\r\n\r\nI am using dynamic import to import icons conditionally but I don't want to prefetch them.\r\nThis might stack up to many unused icons because it prefetches all icons from the `./icons` folder.\r\n\r\nWhen I want to load just Twitter icon, everything is imported.\r\n\r\n```\r\n\u003CInlineIcon name=\"twitter\" />\r\n```\r\n\r\n\r\n## Code\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003CIcon />\r\n\u003C/tempalte>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst props = defineProps\u003C{name: string}>()\r\n\r\nconst Icon = computed(() => defineAsyncComponent(() => import(`../icons/${props.name}.svg?component`)));\r\n\u003C/script>\r\n```\r\n\r\n\r\n\r\n",[2877,2880,2883],{"name":2878,"color":2879},"workaround available","11376d",{"name":2881,"color":2882},"❗ p4-important","D93F0B",{"name":2884,"color":2885},"performance","E84B77",18376,"Disable `prefetch` for dynamic imports","2025-03-16T23:31:44Z","https://github.com/nuxt/nuxt/issues/18376",0.7614594,{"description":2892,"labels":2893,"number":2894,"owner":2867,"repository":2868,"state":2895,"title":2896,"updated_at":2897,"url":2898,"score":2899},"### Motivation\r\n\r\nAs is, iconify is great for free, public icon sets. For commercial purposes, you may want to use commercially licensed icon pack - the most popular example being [Font Awesome Pro](https://fontawesome.com/icons). Iconify [already provides](https://iconify.design/docs/libraries/tools/examples/import-fa-pro.html) a way of converting custom icon packs into `IconifyJSON` definition. However, Including the whole `IconifyJSON` in the app is costly, it can easily weigh over 100 kB (raw). Therefore, iconify by default uses API provider to deliver only the requested icon definitions on demand. It is currently not possible to easily host your own icon packs definitions.\r\n\r\n### Feature Request\r\nSince nuxt already hosts server routes, it would be great if the module could provide a streamlined method of hosting Iconify API provider. This way, the end-user could easily use their non-free icon packs benefiting from the on-demand architecture of iconifi's `loadIcon`.\r\n\r\nExample module configuration could look like this:\r\n```ts\r\ndefineAppConfig({\r\n nuxtIcon: {\r\n customCollections: [\r\n resolve('./assets/icons/collections/my-icons.json')\r\n ]\r\n }\r\n})\r\n```\r\n\r\nTo achieve this, the module would have to expose http API conforming to the [Iconify API standard](https://iconify.design/docs/api/icon-data.html#query). The API is very straight forward\r\n\r\nExample definition:\r\n```json\r\n{\r\n \"prefix\": \"my-icons\",\r\n \"lastModified\": 1691181322,\r\n \"icons\": {\r\n \"a\": { \"body\": \"\u003Cpath d=\\\"_path_a_\\\"/>\" },\r\n \"b\": { \"body\": \"\u003Cpath d=\\\"_path_b_\\\"/>\" },\r\n \"c\": { \"body\": \"\u003Cpath d=\\\"_path_c_\\\"/>\" }\r\n },\r\n \"width\": 24,\r\n \"height\": 24,\r\n}\r\n```\r\n\r\nExample API response to `GET /api/iconify-provider/my-icons.json?icons=a,c`\r\n```json\r\n{\r\n \"prefix\": \"my-icons\",\r\n \"icons\": {\r\n \"a\": { \"body\": \"\u003Cpath d=\\\"_path_a_\\\"/>\" },\r\n \"c\": { \"body\": \"\u003Cpath d=\\\"_path_c_\\\"/>\" }\r\n },\r\n \"width\": 24,\r\n \"height\": 24,\r\n}\r\n```\r\n\r\nModule would have to register the custom provider with iconify library:\r\n```ts\r\nimport { addAPIProvider } from '@iconify/vue'\r\naddAPIProvider('nuxt', { resources: ['/api/iconify-provider'] })\r\n```\r\n\r\nAnd the icons should be usable as per example:\r\n```html\r\n\u003Cicon name=\"@nuxt:my-icons:a\"/>\r\n\u003Cicon name=\"@nuxt:my-icons:c\"/>\r\n```",[],97,"closed","Feature Request: Built-in API provider for custom IconifyJSON","2024-10-25T16:58:25Z","https://github.com/nuxt/icon/issues/97",0.7309161,{"description":2901,"labels":2902,"number":2903,"owner":2867,"repository":2868,"state":2895,"title":2904,"updated_at":2905,"url":2906,"score":2907},"I have nuxt icon setup with a SSG app. I'm using lucide and the collection is installed as a dependency. I run nuxt generate, but at runtime, I see my app is calling out to the Iconify API. Is this intentional? If so, why? If not, what do I need to do to get the icons included in the SSG bundle.",[],396,"Nuxt Icon Using Inconify API w/ SSG","2025-05-18T21:03:54Z","https://github.com/nuxt/icon/issues/396",0.73265004,{"description":2909,"labels":2910,"number":2914,"owner":2867,"repository":2867,"state":2895,"title":2915,"updated_at":2916,"url":2917,"score":2918},"Hi Guys,\r\n\r\nI'm struggling to initialize my Vuex store with the account details of the logged in user from `localStorage`.\r\n\r\nI've been through as many examples as I can of Auth using Nuxt, and none of them demonstrate how on the client side to pull an `authToken` from `localStorage` to re-use with subsequent API requests when the user refreshes the page or navigates to the App \r\n\r\nDisclaimer: I'm not using Nuxt in SSR (this might affect your answer).\r\n\r\nWhat is annoying is that I _can_ actually load from `localStorage` and initialize my state but then it gets overwritten. I'll show you what I mean with this small code example:\r\n\r\n```\r\nbuildInitialState () {\r\n if (!process.server) {\r\n // Query the localStorage and return accessToken, refreshToken and account details\r\n return {accessToken: \u003Cvalid-string>, refreshToken: \u003Cvalid-string>, account: \u003Cvalid-json-blob>}\r\n } else {\r\n // Return \"empty map\", we use the string \"INVALID\" for demonstration purposes.\r\n return {accessToken: \"INVALID\", refreshToken: \"INVALID\", account: \"INVALID\"}\r\n }\r\n}\r\n\r\nexport const state = () => buildInitialState()\r\n```\r\n\r\nIf I put a breakpoint on `buildInitialState` I can see that I correctly initialize the state with the value of `localStorage`, i.e. I get the `accessToken` and `refreshToken`, etc.. back.\r\n\r\nAll seems well.\r\n\r\nBut *then* .....in another part of the program I'm using Axois to send requests, and I use an axios interceptor to decorate the request with the `accessToken`. To do this I have to stick it into a plugin to get access to the `store`.\r\n\r\nSomething like so:\r\n\r\n```\r\nexport default ({ app, store }) => {\r\n axios.interceptors.request.use((config) => {\r\n const accessToken = _.get(store.state, ['account', 'accessToken'])\r\n if (accessToken) {\r\n config.headers.common['x-auth-token'] = accessToken\r\n }\r\n return config\r\n }, (error) => Promise.reject(error))\r\n}\r\n```\r\n\r\nHere the `store` is closed over in the arrow function supplied to `axios` so when I go to send the request it sees if there is a valid `accessToken`, and if so then use it.\r\n\r\nBUT, and here's the kicker, when a request is made, I look at the `store.state.account.accessToken` and low and behold its been _reinitialized_ back to the value of \"INVALID\".\r\n\r\nWhat? Que?\r\n\r\nIt's almost like the store was *reinitialized* behind the scenes? Or somehow the `state` in the plugin is \"server side state\"?? because if I try and log `buildInitialState` I don't get any messages indicating that the path that produced a map with `INVALID` is being run.\r\n\r\nBasically, I don't thoroughly understand the initialization pathway Nuxt is taking here at all.\r\n\r\nIf any Nuxt masters could help me out understand this a bit more that would be great, it's turning into a bit of a show stopper for me.\r\n\r\nEssentially! All I want to be able to do is save the user so that when they refresh their page we can keep on running without forcing them to re-login again....I thought that would be simple.\r\n\r\nThanks and regards, Jason.\r\n\r\n\r\n\r\n\r\n\r\n\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/c1633\">#c1633\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2911],{"name":2912,"color":2913},"2.x","d4c5f9",1818,"Cannot initialise Vuex store from localStorage on App initialization for Authentication","2023-01-18T15:54:46Z","https://github.com/nuxt/nuxt/issues/1818",0.7434562,{"description":2920,"labels":2921,"number":2922,"owner":2867,"repository":2868,"state":2895,"title":2923,"updated_at":2924,"url":2925,"score":2926},"\r\n\r\n\r\n\r\n",[],78,"Excuse me, when v-for performs list rendering, the icon name will appear. May I ask what may be the problem. Thanks","2023-05-10T09:55:26Z","https://github.com/nuxt/icon/issues/78",0.75081944,{"description":2928,"labels":2929,"number":2931,"owner":2867,"repository":2867,"state":2895,"title":2932,"updated_at":2933,"url":2934,"score":2935},"Hello,\r\n\r\nI have read to some other users having this issue but I have not found any solution...this is my version of nuxt and libraries involved in this particular issue. \r\n\r\n\"@nuxtjs/axios\": \"5.3.5\",\r\n \"nuxt\": \"2.2.0\",\r\n\"vuex-persistedstate\": \"2.5.4\"\r\n\r\nI have the nuxtServerInit in `store/index.js` file as the doc says, and I'm using a clasic `export default` with all my mutations, actions...\r\n\r\nThe problem comes in nuxtServerInit function when fetching and storing the response data. \r\nIf there is not stored data (the first load) there is no problem, I receive the data ok, and when I make a commit the data is stored just fine, but the weird situation comes when I have already cached store data. \r\n\r\nHere the data that I receive on nuxtServerInit is correct, but the commit once I have stored data previously doesn't anything. I'm tracing what it comes from the server side and its ok but is like the previous front stored data is overriding the new server-side data from the nuxtServerInit...If I remove app localStorage (Chrome dev tools: Application > Clear Storage > Clear Site data), it works again only in the first load. Here is my code:\r\n\r\n`async nuxtServerInit({ commit, dispatch }, { req, redirect }) {`\r\n` let slug = req.headers.host`\r\n` let data = await dispatch('getSlugData', slug)`\r\n` if (data) {`\r\n` // this data is ok, and commit triggers`\r\n` // but have no effect, always prevails the data already persisted`\r\n` commit('SET_SLUG_DATA', data)`\r\n` } else {`\r\n` redirect('https://google.com')`\r\n` }`\r\n`}`\r\n\r\nI'm missing something?\r\n\r\nthank you\r\n\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8282\">#c8282\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2930],{"name":2912,"color":2913},4493,"nuxtServerInit server data is overrided by previous stored front data","2023-01-18T20:06:15Z","https://github.com/nuxt/nuxt/issues/4493",0.7526706,{"description":2937,"labels":2938,"number":2948,"owner":2867,"repository":2867,"state":2895,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Environment\r\n\r\n- Operating System: `Linux`\r\n- Node Version: `v18.5.0`\r\n- Nuxt Version: `3.0.0-rc.9`\r\n- Nitro Version: `0.5.0`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nSee stackblitz:\r\n\r\nhttps://stackblitz.com/edit/github-qzajsz\r\n\r\n1. Click \"Open In New tab\" at the top right and open the dev console in the browser.\r\n2. Click \"OPEN HOME\" \r\n3. See that \"DATA VAL\" logged is `null` in the dev console.\r\n4. Click \"GO BACK TO HOME\" and then click \"OPEN COMPONENT\" again\r\n5. See that \"DATA VAL\" is not `null` and has the value from the first time opening the component.\r\n\r\n### Describe the bug\r\n\r\nDespite `initialCache` being specified in the API in `page1.vue`, when returning back to the page a second time the cached value is used initially.\r\n\r\nYou can see that \"NEW DATA VAL\" is logged indicating that the data is eventually replaced by new fetched data.\r\n\r\nHowever on the initial load, the data should be `null` and not be given old data.\r\n\r\n### Additional context\r\n\r\nOn my production app, this means users see old data when returning back to a page before it is replaced by new data.\r\n\r\nNormally I replace the data with a loading spinner when `data === null`, however since `data` is not null this does not appear.\r\n\r\n### Logs\r\n\r\n_No response_",[2939,2942,2945],{"name":2940,"color":2941},"3.x","29bc7f",{"name":2943,"color":2944},"bug","d73a4a",{"name":2946,"color":2947},"🔨 p3-minor","FBCA04",14813,"useLazyAsyncData with initialCache: false is still using cache","2023-05-10T12:38:05Z","https://github.com/nuxt/nuxt/issues/14813",0.7585145,{"description":2954,"labels":2955,"number":2956,"owner":2867,"repository":2868,"state":2895,"title":2957,"updated_at":2958,"url":2959,"score":2960},"There is a race-condition that we finally found that was causing our app to \"wait\" for about 10 seconds. \r\n\r\n```\r\nif (!state.value?.[iconKey.value]) {\r\n isFetching.value = true\r\n state.value[iconKey.value] = await loadIcon(resolvedIcon.value).catch(() => undefined)\r\n isFetching.value = false\r\n }\r\n```\r\n\r\nIf your page has 1000s of the same icon, the `loadIcon` gets called 1000s of times before the if statement is true. The loadIcon method is slower than nuxt-icon calling this with each icon on the page.\r\n\r\nYou need to set either another variable that designates that you are already loading this icon, or set `state.value[iconKey.value]` with a temporary non-falsy value.\r\n",[],151,"Race condition: app delays with loading (the same) icon","2024-07-18T22:45:56Z","https://github.com/nuxt/icon/issues/151",0.76349306,{"description":2962,"labels":2963,"number":2968,"owner":2867,"repository":2867,"state":2895,"title":2969,"updated_at":2970,"url":2971,"score":2972},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚\r\n\r\n**IMPORTANT** Before reporting a bug:\r\n\r\n- Please make sure that you have read through Nuxt documentation: https://nuxtjs.org\r\n- If issue is related to a module please create the issue in corresponding repository\r\n- Ensure using latest version of nuxt dependencies using `yarn upgrade nuxt` or `npm upgrade nuxt`\r\n\r\n👍 A properly detailed bug report can save a LOT of time and help fixing issues as soon as possible.\r\n-->\r\n\r\n### Versions\r\n\r\n- nuxt: 2.15.8\r\n- node: 16.17.0\r\n\r\n### Reproduction\r\n\r\nSetup privateRuntimeConfig with officeRNDClientId and officeRNDClientSecret. Load the data in asyncData using $config with the following code snippet\r\n\r\n```\r\n\u003Cscript lang=\"ts\">\r\nimport { Context } from \"@nuxt/types\";\r\nimport { TokenData } from \"./../types\";\r\nimport { Component, Vue } from \"nuxt-property-decorator\";\r\n\r\n@Component({\r\n asyncData: async ({\r\n $config: { officeRNDClientId, officeRNDClientSecret },\r\n $axios,\r\n }: Context): Promise\u003C{ tokenData: TokenData }> => {\r\n const tokenResponse = (\r\n await $axios.post(\r\n \"/token\",\r\n new URLSearchParams({\r\n client_id: officeRNDClientId,\r\n client_secret: officeRNDClientSecret,\r\n grant_type: \"client_credentials\",\r\n scope: \"officernd.api.read\",\r\n }),\r\n { headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" } }\r\n )\r\n ).data;\r\n\r\n return {\r\n tokenData: {\r\n token: tokenResponse.access_token,\r\n expiresIn: +tokenResponse.expires_in,\r\n },\r\n };\r\n },\r\n})\r\nexport default class IndexPage extends Vue {\r\n tokenData!: TokenData;\r\n\r\n created() {\r\n setTimeout(() => this.$nuxt.refresh(), 2000);\r\n }\r\n}\r\n\u003C/script>\r\n```\r\n\r\nofficeRNDClientId and officeRNDClientSecret are set in nuxt.config.js:\r\n```\r\nprivateRuntimeConfig: {\r\n officeRNDClientId: process.env.OFFICERND_CLIENT_ID,\r\n officeRNDClientSecret: process.env.OFFICERND_CLIENT_SECRET,\r\n },\r\n```\r\n\r\nAfter calling $nuxt.refresh() after 2 seconds asyncData is called a second time but officeRNDClientId and officeRNDClientSecret are undefined then. Therefore, the POST request fails.\r\n\r\n\r\n### Steps to reproduce\r\n- Run Code Snippet\r\n- Open Dev Tools\r\n- POST to token endpoint with officeRNDClientId and officeRNDClientSecret (set in privateRuntimeConfig)\r\n- After 2 seconds page is reloaded through $nuxt.refresh()\r\n- But in asyncData both officeRNDClientId and officeRNDClientSecret are undefined\r\n\r\n### What is Expected?\r\n\r\n- After calling $nuxt.refresh() $config values should be set (as in initial page load)\r\n\r\n### What is actually happening?\r\n\r\n- After calling $nuxt.refresh() $config values are undefined",[2964,2967],{"name":2965,"color":2966},"pending triage","E99695",{"name":2912,"color":2913},10833,"privateRuntimeConfig lost after $nuxt.refresh()","2024-06-30T09:22:08Z","https://github.com/nuxt/nuxt/issues/10833",0.7656519,["Reactive",2974],{},["Set"],["ShallowReactive",2977],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frZOjQQzqSpdLXU7usmFk9mV7JybSQyDK_bwhkIx0Wdk":-1},"/nuxt/icon/267"]