\n \u003CPageContentblock v-for=\"(item, index) in posts.data[0].content\" :key=\"item.id\" :item=\"item\" v-once/>\n \u003C/div>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nconst img = useImage()\nconst { data: posts } = await useAsyncData('home', () => $fetch('https://dummyurl.to.directus'), { watch: false, deep: false, strategy: 'static' })\nvar metaData = [{ name: 'description', content: posts.value.data[0].meta_description }, { property: 'og:image', content: img('/directus/assets/' + posts.value.data[0].OG_Image,{ width: 1024, height: 576, format: 'webp'}) }]\nuseHead({\n title: posts.value.data[0].titel,\n meta: metaData\n})\n\u003C/script>\n\n### Reproduction\n\nYou can see the issue live on my production website when you open the console:\nhttps://www.florian-strasser.de\n\n### Describe the bug\n\nWhen I switched over from nuxt 2 to nuxt 3 it introduced my website to the warning:\n`The resource https://www.florian-strasser.de/_payload.json?54c17914-61aa-4ea1-86d9-735ec3e50181 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.`\n\nAt first I thought that this will be fixed during later patches, but now we are more or less before nuxt 4 and it still appears.\n\nSince the latest patches there is also another json file that has a similar warning:\n`[Warning] The resource https://www.florian-strasser.de/_nuxt/builds/meta/54c17914-61aa-4ea1-86d9-735ec3e50181.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.`\n\nThe Files are not that big as I would expect any problems - also my page speed results are pretty good so I really don't understand what could be the issue for that type of warning. When inspecting the payload json someone could argue that this is actually alot of text, but I don't see other possibilities when creating an entire page.\n\nFor the meta file I'm even more confused since is a very small file.\n\nAnyone has an idea?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[1998,2001],{"name":1999,"color":2000},"pending triage","E99695",{"name":1985,"color":2002},"FBCA04",30833,"[de:translated] payload.json and meta json file preloaded but not used within a few seconds","2025-03-18T22:28:42Z","https://github.com/nuxt/nuxt/issues/30833",0.7014549,{"description":2009,"labels":2010,"number":1987,"owner":1988,"repository":2011,"state":2012,"title":2013,"updated_at":2014,"url":2015,"score":1994},"I am experiencing an issue with the customize function in the Nuxt Icon module when using custom collections and attempting to apply different styles to the same icon. It appears that the results of the customize function are being cached and reused across instances, causing all icons of the same type to apply the styles from the first instance only.\n\nHere's my configuration in nuxt.config\n\n``` javascript\nicon: {\n provider: \"server\",\n customCollections: [\n {\n prefix: \"kb\",\n dir: \"./assets/icons\",\n },\n ],\n size: \"24px\",\n mode: \"css\",\n},\n```\n\nI create a component for customize function\n``` vue\n// components.KBIcon.vue\n\n\u003Ctemplate>\n \u003CIcon :name=\"name\" :customize=\"getCustomized\" />\n\u003C/template>\n\n\u003Cscript setup>\nconst props = defineProps({\n name: {\n type: String,\n required: true,\n },\n strokeColor: {\n type: String,\n default: \"\",\n },\n fillColor: {\n type: String,\n default: \"\",\n },\n});\n\nconst getCustomized = (content) => {\n if (props.strokeColor) {\n content = content.replaceAll(\n /stroke=\"[^\"]*\"/g,\n `stroke=\"${props.strokeColor}\"`\n );\n }\n if (props.fillColor) {\n content = content.replaceAll(\n /fill=\"[^\"]*\"/g,\n `fill=\"${props.fillColor}\"`\n );\n }\n return content;\n};\n\u003C/script>\n\n```\n\nand here's how I use it\n``` vue\n\u003CKBIcon name=\"kb:burger\" strokeColor=\"red\" />\n\u003CKBIcon name=\"kb:burger\" strokeColor=\"blue\" />\n```\n\nEach KBIcon instance should render the icon with its respective strokeColor properties:\nThe first icon should have a red stroke.\nThe second icon should have a blue stroke.\n\nhowever, the actual behavior is both icons render with the same red strokeColor, indicating that the customize function result is being cached and reused. Any solution for this? I just need to set different colors for the same icon. I tried set style color but it also have the same cache result.\n\nhere's my svg I use (/assets/icons/burger.svg):\n``` javascript\n\u003Csvg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\u003Cpath d=\"M5 6.78137H19\" stroke=\"#9EA2AE\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\u003Cpath d=\"M5 11.6251H19\" stroke=\"#9EA2AE\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\u003Cpath d=\"M5 16.4687H19\" stroke=\"#9EA2AE\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\u003C/svg>\n```",[],"icon","closed","local nuxt icon caching issue","2025-01-06T07:08:29Z","https://github.com/nuxt/icon/issues/332",{"description":2017,"labels":2018,"number":2026,"owner":1988,"repository":1988,"state":2012,"title":2027,"updated_at":2028,"url":2029,"score":2030},"### Environment\n\nnode: v16.15.1\r\nnuxt: ^3.2.0\r\ntailwindcss: ^6.2.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ky7itr\n\n### Describe the bug\n\nHello team,I want to use the style of tailwindcss: https://tailwindcss.com/docs/gradient-color-stops\r\n\r\nso I wrote this:\r\n\r\nresult:\r\n\r\nIt's right,now I use dynamic class:\r\n\r\nreuslt:\r\n\r\n\r\nIt can be seen from the console that the style is indeed written into the class,so what did I wrong?If you can see right style,please \r\nrestart the project,thanks.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2019,2022,2023],{"name":2020,"color":2021},"3.x","29bc7f",{"name":1999,"color":2000},{"name":2024,"color":2025},"⛔️ can be closed","484893",19013,"Nuxt3 cannot use tailwindcss in dynamic class","2023-02-14T08:39:44Z","https://github.com/nuxt/nuxt/issues/19013",0.683063,{"description":2032,"labels":2033,"number":2038,"owner":1988,"repository":1988,"state":2012,"title":2039,"updated_at":2040,"url":2041,"score":2042},"### Version\n\n[v2.4.3](https://github.com/nuxt.js/releases/tag/v2.4.3)\n\n### Reproduction link\n\n[https://user-images.githubusercontent.com/4768095/52838878-ba8f9100-3126-11e9-9dea-8c6f2d98bf1d.png](https://user-images.githubusercontent.com/4768095/52838878-ba8f9100-3126-11e9-9dea-8c6f2d98bf1d.png)\n\n### Steps to reproduce\n\nHi guys,\n\nI'm using ElementUI and [custom-theme](https://element.eleme.io/#/en-US/component/custom-theme)\n\nBut I saw error with file font.\n\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8666\">#c8666\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2034,2035],{"name":1999,"color":2000},{"name":2036,"color":2037},"2.x","d4c5f9",5042,"Nuxt 2 - Can not load font (.woff) file","2023-01-22T15:33:01Z","https://github.com/nuxt/nuxt/issues/5042",0.6881074,{"labels":2044,"number":2047,"owner":1988,"repository":1988,"state":2012,"title":2048,"updated_at":2049,"url":2050,"score":2051},[2045,2046],{"name":2020,"color":2021},{"name":1999,"color":2000},14261,"Nuxt 3 preloads all pages, styles, fonts, svg. Adds everything in head to rel=\"prefetch\"","2023-01-19T17:31:42Z","https://github.com/nuxt/nuxt/issues/14261",0.693034,{"description":2053,"labels":2054,"number":2056,"owner":1988,"repository":1988,"state":2012,"title":2039,"updated_at":2057,"url":2058,"score":2059},"Hi guys,\r\n\r\nI'm using ElementUI and [custom-theme](https://element.eleme.io/#/en-US/component/custom-theme)\r\n\r\nBut I saw error with file font.\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://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8665\">#c8665\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2055],{"name":2036,"color":2037},5041,"2023-01-18T20:10:40Z","https://github.com/nuxt/nuxt/issues/5041",0.69598883,{"description":2061,"labels":2062,"number":2065,"owner":1988,"repository":1988,"state":2012,"title":2066,"updated_at":2067,"url":2068,"score":2069},"I develop a website that runs with Nuxt 3.13.2, DaisyUI and TailwindCSS with bunch of nuxt modules, kindly please check the package.json details below:\n\n```\n{\n \"name\": \"the-website\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate --modern\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\"\n },\n \"dependencies\": {\n \"@nuxt/image\": \"^1.8.1\",\n \"@nuxtjs/google-fonts\": \"^3.2.0\",\n \"@nuxtjs/i18n\": \"^8.3.3\",\n \"@nuxtjs/seo\": \"^2.0.0-rc.15\",\n \"@nuxtjs/tailwindcss\": \"^6.12.0\",\n \"@vee-validate/nuxt\": \"^4.13.2\",\n \"@vee-validate/yup\": \"^4.13.2\",\n \"@vueuse/core\": \"^11.1.0\",\n \"@vueuse/nuxt\": \"^11.1.0\",\n \"nuxt\": \"^3.13.2\",\n \"nuxt-booster\": \"^3.1.5\",\n \"nuxt-icons\": \"^3.2.1\",\n \"nuxt-mail\": \"^5.0.1\",\n \"nuxt-marquee\": \"^1.0.4\",\n \"nuxt-snackbar\": \"^1.0.4\",\n \"sass\": \"^1.77.5\",\n \"vue\": \"^3.4.27\",\n \"vue-countup-v3\": \"^1.4.2\",\n \"vue-router\": \"^4.3.3\",\n \"yup\": \"^1.4.0\"\n },\n \"devDependencies\": {\n \"@egoist/tailwindcss-icons\": \"^1.8.1\",\n \"@iconify/json\": \"^2.2.218\",\n \"@tailwindcss/forms\": \"^0.5.7\",\n \"@tailwindcss/typography\": \"^0.5.13\",\n \"daisyui\": \"^4.12.2\",\n \"nuxt-aos\": \"^1.2.5\"\n },\n \"packageManager\": \"yarn@4.4.1\"\n}\n```\n\nnuxt.config.ts:\n```\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n $production: {\n devtools: { enabled: false },\n },\n\n ssr: true,\n devtools: { enabled: true },\n\n app: {\n head: {\n titleTemplate: '%s %separator WSoft Labs',\n meta: [\n {\n \"name\": \"viewport\",\n \"content\": \"width=device-width, initial-scale=1\"\n },\n {\n \"charset\": \"utf-8\"\n }\n ],\n link: [\n {\n rel: 'icon',\n href: '/favicon.ico'\n }\n ]\n }\n },\n\n runtimeConfig: {\n // apiSecret: '', // can be overridden by NUXT_API_SECRET environment variable\n public: {\n baseURL: process.env.NUXT_BASE_URL ?? 'http://localhost:3000',\n apiBase: process.env.NUXT_API_BASE ?? 'http://localhost:8000/api', // can be overridden by NUXT_PUBLIC_API_BASE environment variable\n apiUrl: process.env.NUXT_API_URL ?? 'http://localhost:8000',\n }\n },\n\n imports: {\n dirs: [\n // Scan top-level modules\n 'composables',\n // ... or scan modules nested one level deep with a specific name and file extension\n 'composables/*/index.{ts,js,mjs,mts}',\n // ... or scan all modules within given directory\n 'composables/**',\n 'utils/**'\n ]\n },\n\n components: [\n {\n path: './components',\n extensions: ['.vue'],\n pathPrefix: false\n }\n ],\n\n modules: [\n '@nuxtjs/tailwindcss',\n 'nuxt-snackbar',\n 'nuxt-icons',\n 'nuxt-marquee',\n '@vee-validate/nuxt',\n 'nuxt-aos',\n '@nuxtjs/i18n',\n '@nuxtjs/seo',\n 'nuxt-booster',\n '@nuxt/image',\n '@nuxtjs/google-fonts',\n '@vueuse/nuxt',\n [\n 'nuxt-mail', {\n message: {\n to: process.env.NUXT_MAIL_TO,\n },\n smtp: {\n host: process.env.NUXT_MAIL_SMTP,\n port: process.env.NUXT_MAIL_PORT ?? 25,\n secure: process.env.NUXT_MAIL_SMTP_SECURE ?? false,\n auth: {\n user: process.env.NUXT_MAIL_USER,\n pass: process.env.NUXT_MAIL_PASSWORD,\n }\n },\n }\n ],\n ],\n\n build: {\n transpile: ['vue-countup-v3'],\n },\n\n tailwindcss: {\n cssPath: [\n '~/assets/scss/main.scss',\n {\n injectPosition: 'first'\n }\n ],\n configPath: 'tailwind.config',\n exposeConfig: {\n level: 2\n },\n config: {},\n viewer: true,\n editorSupport: true\n },\n\n css: [\n \"@/assets/scss/main.scss\",\n ],\n\n snackbar: {\n top: true,\n right: true,\n duration: 5000\n },\n\n veeValidate: {\n autoImports: true,\n componentNames: {\n Form: 'VeeForm',\n Field: 'VeeField',\n FieldArray: 'VeeFieldArray',\n ErrorMessage: 'VeeErrorMessage',\n },\n },\n\n i18n: {\n locales: [\n {\n code: 'en',\n language: 'en-US',\n name: 'English',\n file: 'en-US.js'\n },\n {\n code: 'kr',\n language: 'kr-KR',\n name: 'Korean',\n file: 'kr-KR.js'\n },\n ],\n defaultLocale: 'kr',\n lazy: true,\n langDir: 'lang',\n compilation: {\n strictMessage: false\n },\n detectBrowserLanguage: {\n useCookie: true,\n cookieKey: 'wsoftlabs_i18n_redirected',\n alwaysRedirect: true,\n fallbackLocale: 'en',\n },\n },\n\n booster: {\n detection: {\n performance: true,\n browserSupport: true,\n battery: true,\n },\n performanceMetrics: {\n timing: {\n fcp: 800,\n dcl: 1200\n }\n }\n },\n\n image: {\n screens: {\n default: 320,\n xxs: 480,\n xs: 576,\n sm: 768,\n md: 996,\n lg: 1200,\n xl: 1367,\n xxl: 1600,\n '4k': 1921\n },\n provider: \"ipx\",\n dir: \"assets\"\n },\n\n googleFonts: {\n families: {\n Poppins: {\n wght: [100, 200, 300, 400, 500, 600, 700, 800, 900],\n ital: [100, 200, 300, 400, 500, 600, 700, 800, 900],\n }\n },\n display: 'swap',\n prefetch: false,\n preconnect: false,\n preload: false,\n download: true,\n base64: true,\n overwriting: true,\n },\n\n compatibilityDate: '2024-10-14'\n})\n```\n\nmy issue is when I try to run it via dev server via `yarn dev`, it will not show a warning for hydration mismatches:\n\n[![running in yarn dev][1]][1]\n\nbut when I do run `yarn generate && yarn preview`, it does show the said error:\n\n[![running in yarn generate][2]][2]\n\nwith this current `app.vue` codebase:\n\n[![prev. ClientOnly placement][3]][3]\n\n\nNow, I did a workaround and trying to tweak `ClientOnly` component to move the wrap and include the `NuxtLayout` component\n\n[![curr. ClientOnly placement][4]][4]\n\nafter then, I re-run `yarn generate && yarn preview`, the hydration error is gone but my images is now not working anymore.\n\n[![enter image description here][5]][5]\n\nbut when I run the workaround with `yarn dev`, it has the same result as the first screenshot (no hydration mismatches warnings/errors).\n\nI'm running a module called `nuxt-image` to optimize the images on load when uploaded to the server and `nuxt-booster` to boost the SEO-related things of the app.\n\nhere's my [repo][6] for further details and do some workaround about it, please do leave some comments/suggestions/guidance/help with the repo as a form of help will be much appreciated in order to improve the overall project and most importantly, myself.\n\n\n [1]: https://i.sstatic.net/AzYGTJ8J.png\n [2]: https://i.sstatic.net/JzzVXt2C.png\n [3]: https://i.sstatic.net/bZJL5luU.png\n [4]: https://i.sstatic.net/TyT166Jj.png\n [5]: https://i.sstatic.net/kZ6XfSmb.png\n [6]: https://github.com/noelc10/wsl-website",[2063,2064],{"name":1999,"color":2000},{"name":1985,"color":2002},29704,"Nuxt 3.13.2: nuxt generate build hydration completed but contains mismatches errors","2025-03-24T23:15:34Z","https://github.com/nuxt/nuxt/issues/29704",0.70348966,{"description":2071,"labels":2072,"number":2074,"owner":1988,"repository":1988,"state":2012,"title":2075,"updated_at":2076,"url":2077,"score":2078},"There might be a solution for this, but I have looked through all the issues and could not find mention of this particular issue (though https://github.com/nuxt/nuxt.js/issues/872 might be relevant).\r\n\r\nIn my `assets/styles/global.scss` file I reference fonts stored at `assets/fonts/keiser`.\r\n```\r\n@font-face {\r\n font-family: \"Keiser\";\r\n src: url(\"~assets/fonts/keiser/keiser-webfont.eot\");\r\n src: url(\"~assets/fonts/keiser/keiser-webfont.eot\") format(\"embedded-opentype\"), \r\n url(\"~assets/fonts/keiser/keiser-webfont.woff\") format(\"woff\"), \r\n url(\"~assets/fonts/keiser/keiser-webfont.ttf\") format(\"truetype\");\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n```\r\nWhich then results in this error:\r\n```\r\n error in ./assets/fonts/keiser/keiser-webfont.woff\r\n\r\nModule parse failed: D:\\Development\\Keiser\\Keiser.Metrics\\Keiser.Metrics.Web\\assets\\fonts\\keiser\\keiser-webfont.woff Unexpected character ' ' (1:8)\r\nYou may need an appropriate loader to handle this file type.\r\n(Source code omitted for this binary file)\r\n\r\n @ ./~/css-loader?sourceMap!./~/sass-loader/lib/loader.js?sourceMap!./assets/styles/global.scss 6:281-331\r\n @ ./assets/styles/global.scss\r\n @ ./~/babel-loader/lib?{\"presets\":[\"vue-app\"],\"babelrc\":false,\"cacheDirectory\":true}!./~/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue\r\n @ ./.nuxt/App.vue\r\n @ ./.nuxt/index.js\r\n @ ./.nuxt/client.js\r\n @ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js\r\n```\r\nWe would normally use [resolve-url-loader](https://github.com/bholloway/resolve-url-loader) to solve this issue. I see that there are a few ways to override loaders, but none of the ones I tried would work (and most seemed to be ignored for this file). Is there a method for overriding the loader for this file?\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/c767\">#c767\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2073],{"name":2036,"color":2037},897,"Including fonts in styles","2023-01-18T15:39:56Z","https://github.com/nuxt/nuxt/issues/897",0.7037728,{"description":2080,"labels":2081,"number":2083,"owner":1988,"repository":1989,"state":2012,"title":2084,"updated_at":2085,"url":2086,"score":2087},"\u003Cimg width=\"825\" alt=\"SCR-20240304-tzmi\" src=\"https://github.com/nuxt/fonts/assets/133459587/c6d01cda-6d0c-4151-870a-d2701594d55d\">\r\n",[2082],{"name":1985,"color":1986},29,"An error occurred from the font module of @nuxtjs to using nuxt/fonts","2024-03-05T05:13:39Z","https://github.com/nuxt/fonts/issues/29",0.7086974,["Reactive",2089],{},["Set"],["ShallowReactive",2092],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"Z0WAx1fqjeRrPj5mFh3qJfzkvzS3HDAk0Y1ckChOhmI":-1},"/nuxt/fonts/443"]