\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",[],129,"Unexpected behaviour when using an Icon within ClientOnly fallback","2023-12-18T12:08:48Z","https://github.com/nuxt/icon/issues/129",0.7378325,{"description":2004,"labels":2005,"number":2015,"owner":1988,"repository":1988,"state":1990,"title":2016,"updated_at":2017,"url":2018,"score":2019},"## 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",[2006,2009,2012],{"name":2007,"color":2008},"workaround available","11376d",{"name":2010,"color":2011},"❗ p4-important","D93F0B",{"name":2013,"color":2014},"performance","E84B77",18376,"Disable `prefetch` for dynamic imports","2025-03-16T23:31:44Z","https://github.com/nuxt/nuxt/issues/18376",0.76907086,{"description":2021,"labels":2022,"number":2023,"owner":1988,"repository":1989,"state":2024,"title":2025,"updated_at":2026,"url":2027,"score":2028},"### 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.72003436,{"description":2030,"labels":2031,"number":2035,"owner":1988,"repository":1988,"state":2024,"title":2036,"updated_at":2037,"url":2038,"score":2039},"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>",[2032],{"name":2033,"color":2034},"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.75657064,{"description":2041,"labels":2042,"number":2043,"owner":1988,"repository":1989,"state":2024,"title":2044,"updated_at":2045,"url":2046,"score":2047},"\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.7580497,{"labels":2049,"number":2057,"owner":1988,"repository":1988,"state":2024,"title":2058,"updated_at":2059,"url":2060,"score":2061},[2050,2053,2056],{"name":2051,"color":2052},"stale","ffffff",{"name":2054,"color":2055},"pending triage","E99695",{"name":2033,"color":2034},7674,"context.$config not available in client-side plugin","2023-01-22T15:36:02Z","https://github.com/nuxt/nuxt/issues/7674",0.7589064,{"description":2063,"labels":2064,"number":2065,"owner":1988,"repository":1989,"state":2024,"title":2066,"updated_at":2067,"url":2068,"score":2069},"So in my case in nuxt.config.ts i described custom collection \r\nicon: {\r\n customCollections: [\r\n {\r\n prefix: 'elfi',\r\n dir: './assets/icons'\r\n },\r\n ],\r\n}\r\n\r\nif in my directory lies files with EN names - all works fine\r\nif i put there file with cyrillic (for ex RU) name - the nuxt even can't start properly with \"npm run dev\" - blank screen with no errors\r\n\r\nand one else thing - if i make some changes in folder with icons - i need to terminate nuxt and run again \"npm run dev\" to activate changes",[],201,"Seems like @nuxt/icon doesn't understand other language in files name in local icon collection","2024-07-16T20:38:16Z","https://github.com/nuxt/icon/issues/201",0.7597584,{"description":2071,"labels":2072,"number":2065,"owner":1988,"repository":2074,"state":2024,"title":2075,"updated_at":2076,"url":2077,"score":2069},"### 🆒 Your use case\r\n\r\nI would love to use the `ScriptGoogleMaps` component but I dont like the static placeholder. Instead I would like to immediately display the map.\r\n\r\n### 🆕 The solution you'd like\r\n\r\nAdd a prop to disable the placeholder / static map feature entirely.\r\n\r\n### ℹ️ Additional info\r\n\r\nReasons:\r\n- Static Map has a max resolution that is very low and therefor always looks blurry on high dpi screens\r\n- Static Map cant be [styled](https://snazzymaps.com/)\r\n- It takes some time until the scripts are loaded and the map is initialized. Therefor the \"activate map on hover\" doesnt work from a UX perspective",[2073],{"name":1985,"color":1986},"scripts","Google Maps: Add option to disabled placeholder","2024-09-03T15:45:42Z","https://github.com/nuxt/scripts/issues/201",{"description":2079,"labels":2080,"number":2083,"owner":1988,"repository":2084,"state":2024,"title":2085,"updated_at":2086,"url":2087,"score":2088},"When we moved from UnoCSS to TailwindCSS, we lost the ability to parse and bundle iconify-json through UnoCSS parser. With no idea on how to achieve the same behaviour with TailwindCSS, we made use of iconify-vue to load icons on the fly: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Icon.vue",[2081],{"name":1985,"color":2082},"1ad6ff",57,"nuxt.com","Fix UI iconify offline","2022-11-04T11:26:57Z","https://github.com/nuxt/nuxt.com/issues/57",0.7597806,["Reactive",2090],{},["Set"],["ShallowReactive",2093],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"rZOjQQzqSpdLXU7usmFk9mV7JybSQyDK_bwhkIx0Wdk":-1},"/nuxt/icon/267"]