\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```",[2886,2889],{"name":2887,"color":2888},"pending triage","E99695",{"name":2890,"color":2891},"needs reproduction","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.7298263,{"description":2898,"labels":2899,"number":2900,"owner":2868,"repository":2869,"state":2870,"title":2901,"updated_at":2902,"url":2903,"score":2904},"In order to reach a near zero-config behavior and to avoid confusion, the default font weight can be set to `400 700` instead of a single `400` in the upcoming v1.12.0 release after unjs/unifont#193 is merged.\n\n@danielroe What do you think?",[],640,"idea: Font weight should default to `400 700` instead of a single `400`","2025-05-31T09:31:54Z","https://github.com/nuxt/fonts/issues/640",0.7307862,{"description":2906,"labels":2907,"number":2917,"owner":2868,"repository":2918,"state":2870,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWe're defining our typography style guide as custom utilities that consist of `font-size` and `font-weight` declarations like so\n\n```css\n/* main.css */\n@import 'tailwindcss'\n@import 'nuxt/ui'\n\n@utility text-display-1 {\n font-size: 54px;\n font-weight: 600;\n}\n\n@utility text-display-2 {\n ...\n}\n```\n\nWhen applying custom utilities to Nuxt UI components, whether globally in `app.config` or individually via the `ui` prop, only one class is applied, and the other is discarded. For example, with the Button component has `text-sm font-medium` applied by default to the `base` slot, passing `text-display-1` to that slot only overrides the size (blue arrow in the screenshot) while the weight still uses the `font-medium` class (red arrows in the screenshot)\n\n\n\nCommenting either one of the classes applies the other correctly. The problem happens only if there are two (or more?) classes\n\n### Additional context\n\nWe workaround this by marking the class as important `!text-display-1`\n\n### Logs\n\n```shell-script\n\n```",[2908,2911,2914],{"name":2909,"color":2910},"bug","d73a4a",{"name":2912,"color":2913},"v3","49DCB8",{"name":2915,"color":2916},"triage","ffffff",4303,"ui","Using a custom utility to with more than one declaration not applied correctly","2025-06-06T11:59:56Z","https://github.com/nuxt/ui/issues/4303",0.73500276,{"description":2924,"labels":2925,"number":2926,"owner":2868,"repository":2869,"state":2927,"title":2928,"updated_at":2929,"url":2930,"score":2931},"Hey Daniel,\n\nhope you keeping well\n\nnot sure exaclty when this started but in last version or two - and fonts do not display. Am using latest version of Nuxt fonts. \n\n````\nRefused to apply style from 'http://localhost:3000/_nuxt/virtual:nuxt:C%3A%2FUsers%2Fskals%2FDesktop%2Fnuxt%2F.nuxt%2Fnuxt-fonts-global.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.\n````\n\nany hints?\n",[],629,"closed","refused to apply style","2025-05-17T18:04:43Z","https://github.com/nuxt/fonts/issues/629",0.6704084,{"description":2933,"labels":2934,"number":2944,"owner":2868,"repository":2868,"state":2927,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Environment\n\n- Nuxt 3.17.2\n- Vue laetst\n- Tailwind 4.1.5\n- @nuxt/fonts 0.10.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-gqoymb5k?file=app%2Fassets%2Fcss%2Fmain.css\n\n### Describe the bug\n\nSince I recently updated some dependencies, fonts no longer load with @nuxt/fonts.\nReference to this [Discord message](https://discord.com/channels/473401852243869706/897487139888062506/1368934910798073908)\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nRefused to apply style from 'http://localhost:3000/_nuxt/virtual:nuxt:%2Fapp%2F.nuxt%2Fnuxt-fonts-global.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.\n```",[2935,2938,2939,2941],{"name":2936,"color":2937},"good first issue","fbca04",{"name":2887,"color":2888},{"name":2940,"color":2891},"🔨 p3-minor",{"name":2942,"color":2943},"possible regression","B90A42",32006,"MIME type ('application/json') is not a supported stylesheet MIME type","2025-05-19T00:40:16Z","https://github.com/nuxt/nuxt/issues/32006",0.67991614,{"description":2950,"labels":2951,"number":2955,"owner":2868,"repository":2868,"state":2927,"title":2956,"updated_at":2957,"url":2958,"score":2959},"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>",[2952],{"name":2953,"color":2954},"2.x","d4c5f9",897,"Including fonts in styles","2023-01-18T15:39:56Z","https://github.com/nuxt/nuxt/issues/897",0.6954457,{"description":2961,"labels":2962,"number":2967,"owner":2868,"repository":2868,"state":2927,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.5.0\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.6.10\r\n- Builder: vite\r\n- User Config: devtools, css\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\n1. Import a font using `@import` from Google Fonts or load a font from local files.\r\n**~/assets/css/main.css with import**\r\n\r\n```\r\n@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa&display=swap');\r\n\r\n* {\r\n /* background-color: #0E0E0E; */\r\n background-color: white;\r\n font-family: 'Lexend Exa', sans-serif !important;\r\n}\r\n```\r\n\r\n**OR ~/assets/css/main.css** with **@font-face**\r\n```\r\n@font-face {\r\n font-family: 'Lexend Exa';\r\n src: url('/fonts/LexendExa-Regular.woff2') format('woff2');\r\n}\r\n\r\n* {\r\n /* background-color: #0E0E0E; */\r\n background-color: white;\r\n font-family: 'Lexend Exa', sans-serif;\r\n}\r\n```\r\n\r\n**nuxt.config.ts** \r\n`css: [\"~/assets/css/main.css\"]`\r\n\r\n2. Assign the imported or local font to an element using the `font-family` CSS property.\r\n3. Open the project in Google Chrome and inspect the element.\r\n\r\n### Describe the bug\r\n\r\nI'm encountering an issue in my Nuxt.js project where fonts, either imported from Google Fonts or loaded from local files, aren't being applied in Google Chrome. In Chrome's Developer Tools, the `font-family` property is crossed out. Even when using `!important`, the font doesn't change. The issue does not appear in Mozilla Firefox where the font displays correctly. In addition, I'm receiving a console error in Chrome stating: `\"Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.\"`\r\n\r\n\r\n### Additional context\r\n\r\n- The issue persists irrespective of the source of the font (Google Fonts or locally hosted).\r\n- The `@import` statement for the font is placed at the top of the CSS file.\r\n- The URL for the Google Font is correctly specified and accessible.\r\n\r\nDespite numerous troubleshooting steps, the issue remains unresolved in Google Chrome. Any assistance or guidance to address this issue would be greatly appreciated.\r\n\r\n### Logs\r\n\r\n_No response_",[2963,2966],{"name":2964,"color":2965},"3.x","29bc7f",{"name":2887,"color":2888},22388,"Font Loading Issue in Chrome with Permissions-Policy Header Error","2023-07-30T02:43:18Z","https://github.com/nuxt/nuxt/issues/22388",0.69714344,{"description":2973,"labels":2974,"number":2979,"owner":2868,"repository":2868,"state":2927,"title":2980,"updated_at":2981,"url":2982,"score":2983},"Hi,\r\nI have a code:\r\n```\r\n@font-face {\r\n font-family: icomoon;\r\n src: url('/fonts/icomoon/icomoon.woff2') format('woff2');\r\n\r\n font-weight: normal;\r\n font-style: normal;\r\n}\r\n```\r\n\r\nAfter I updated Nuxt from 0.10.6 to rc5 I got an error:(before update it works)\r\n```\r\n in ./node_modules/css-loader?{\"minimize\":true,\"importLoaders\":1,\"sourceMap\":true,\"root\":\"~\",\"alias\":{\"/static\":\"D://Projects//Vue//***//src//static\",\"/assets\":\"D://Projects//Vue//***//src//assets\"}}!./node_modules/postcss-loader/lib?{\"sourceMap\":true,\"plugins\":[null,null,{\"version\":\"6.0.9\",\"plugins\":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],\"postcssPlugin\":\"postcss-cssnext\",\"postcssVersion\":\"6.0.9\"}]}!./node_modules/sass-loader/lib/loader.js?{\"sourceMap\":true}!./src/css/main.scss\r\nModule not found: Error: Can't resolve 'fonts/icomoon/icomoon.woff2' in 'D:\\Projects\\Vue\\Smart Landing\\smart-landing-client\\src\\css'\r\n @ ./node_modules/css-loader?{\"minimize\":true,\"importLoaders\":1,\"sourceMap\":true,\"root\":\"~\",\"alias\":{\"/static\":\"D://Projects//Vue//***//src//static\",\"/assets\":\"D://Projects//Vue//***//src//assets\"}}!./node_modules/postcss-loader/lib?{\"sourceMap\":true,\"plugins\":[null,null,{\"version\":\"6.0.9\",\"plugins\":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],\"postcssPlugin\":\"postcss-cssnext\",\"postcssVersion\":\"6.0.9\"}]}!./node_modules/sass-loader/lib/loader.js?{\"sourceMap\":true}!./src/css/main.scss 6:140737-140775\r\n @ ./src/css/main.scss\r\n @ ./node_modules/babel-loader/lib?{\"presets\":[\"vue-app\",\"stage-0\",\"es2015\"],\"plugins\":[\"transform-decorators-legacy\",\"transform-class-properties\"],\"babelrc\":false,\"cacheDirectory\":true}!./node_modules/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?name=client&reload=true ./.nuxt/client.js\r\n```\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1277\">#c1277\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2975,2978],{"name":2976,"color":2977},"available soon","6de8b0",{"name":2953,"color":2954},1435,"[css-loader] Problem with static files","2023-01-18T15:41:50Z","https://github.com/nuxt/nuxt/issues/1435",0.70296514,["Reactive",2985],{},["Set"],["ShallowReactive",2988],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fXQxUcyh0hDCwQuyME4qcWOzHS0b_HaR7pcO_JeA34aI":-1},"/nuxt/fonts/626"]