\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```",[2923,2926],{"name":2924,"color":2925},"pending triage","E99695",{"name":2927,"color":2928},"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.7383074,{"description":2935,"labels":2936,"number":2937,"owner":2904,"repository":2905,"state":2938,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### 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.68809193,{"description":2944,"labels":2945,"number":2955,"owner":2904,"repository":2956,"state":2938,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nHi there 👋\n\nI'm wondering if there are any plans to support UnoCSS as an alternative to Tailwind CSS in Nuxt UI 3? \n\nCurrently Nuxt UI is tightly coupled with Tailwind CSS. Given that UnoCSS is gaining popularity in the Vue ecosystem and offers great performance benefits, it would be amazing to have UnoCSS as an option.",[2946,2949,2952],{"name":2947,"color":2948},"duplicate","cfd3d7",{"name":2950,"color":2951},"question","d876e3",{"name":2953,"color":2954},"v3","49DCB8",2660,"ui","Question: Any plans to support UnoCSS in Nuxt UI 3?","2024-11-16T13:24:37Z","https://github.com/nuxt/ui/issues/2660",0.69966066,{"description":2962,"labels":2963,"number":2967,"owner":2904,"repository":2904,"state":2938,"title":2968,"updated_at":2969,"url":2970,"score":2971},"I've got tailwind working with PurgeCSS with Nuxt. But I am unable to get `@apply` to work in Vue Single File Components. \r\n\r\nThe only way around this is to put everything in my `main.scss`. And the consequence of this is I lose the ability for code splitting in the SFC.\r\n\r\nAnyone got an idea how to fix this?\r\n\r\nAdding `@tailwind utilities;` does it but it adds the whole utility into server-bundle.json on `yarn build` hence bloating the built files. \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/c1990\">#c1990\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2964],{"name":2965,"color":2966},"2.x","d4c5f9",2273,"Integrating TailwindCSS into Nuxt SFC ","2023-01-18T15:43:52Z","https://github.com/nuxt/nuxt/issues/2273",0.70135736,{"description":2973,"labels":2974,"number":2975,"owner":2904,"repository":2905,"state":2938,"title":2976,"updated_at":2977,"url":2978,"score":2979},"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.7170599,{"description":2981,"labels":2982,"number":2984,"owner":2904,"repository":2904,"state":2938,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.2.9\n------------------------------\n\n### Reproduction\n\nRelated repository:\nhttps://github.com/serhii-chernenko/daisyui-issue\n\n- Correct styles with the Nuxt 3 single application: https://daisyui-issue-ui-playground.pages.dev\n- Broken styles with the latest versions and Nuxt 3 layers architecture: https://daisyui-issue.pages.dev\n- Fixed styles after downgrading packages such as `tailwindcss` and `@tailwindcss/vite` to the version `4.0.3`\n - Preview: https://preview.daisyui-issue.pages.dev\n - PR: https://github.com/serhii-chernenko/daisyui-issue/pull/1\n\n### Describe the bug\n\nIn combination of Nuxt 3 Layers architecture, DaisyUI library, and upgrading Tailwind CSS I have the issue described below.\n\nI also created the same issue to the DaisyUI and Tailwind repos:\n- https://github.com/saadeghi/daisyui/issues/3775\n- https://github.com/tailwindlabs/tailwindcss/issues/17648\n\nBut honestly, I'm not sure to which one it's really related. It'd be nice to involve Tailwind, Nuxt, Vite, and Daisy together, to find a root cause of this.\n\n## Steps to reproduce\n\n### Clone repo and install packages\n\n```\ngit clone git@github.com:serhii-chernenko/daisyui-issue.git\nbun install\n```\n\n### Verify the installed versions related to `tailwind`\n\n```bash\nbun pm ls --all | grep tailwindcss\n├── ...\n├── @tailwindcss/vite@4.1.3\n├── tailwindcss@4.1.3\n```\n\n### Run a single Nuxt 3 application\n\n```\ncd src/layers/ui\nbun run dev\n```\n\nOpen http://localhost:3000\n\nExpected result (buttons do nothing, it's just UI):\n\n\nDeployed version is available here:\nhttps://daisyui-issue-ui-playground.pages.dev\n\n### Run the end application in Nuxt 3 Layers architecture\n\n```\ncd ../../../\nbun run build:app # it's necessary to generate the `wrangler.json` file\nbun run dev:app\n```\n\nOpen http://localhost:3000\n\nExpected result (DaisyUI styles completely broken, but Tailwind's styles work as expected):\n\n\nDeployed version is available here:\nhttps://daisyui-issue.pages.dev\n\n### Downgrade `tailwindcss` and `@tailwindcss/vite` to `4.0.3`\n\nAdd to the root `package.json` file the next content:\n```json\n\"overrides\": {\n \"@tailwindcss/vite\": \"4.0.3\",\n \"tailwindcss\": \"4.0.3\"\n}\n```\n\nOr just switch to the branch:\n```bash\ngit checkout fix/downgraded-tailwind-and-tailwind-vite-versions\n```\n\nPR is available here:\nhttps://github.com/serhii-chernenko/daisyui-issue/pull/1\n\nReinstall packages:\n```\nbun install\n```\n\nVerify packages again:\n```bash\nbun pm ls --all | grep tailwindcss\n├── ...\n├── @tailwindcss/vite@4.0.3\n├── tailwindcss@4.0.3\n```\n\n### Run the end application in Nuxt 3 Layers architecture again\n\n```\nbun run build:app # it's necessary to generate the `wrangler.json` file\nbun run dev:app\n```\n\n### Additional context\n\nI had the same issue with Node v20. There's no difference in the package manager.\n\n### Logs\n\n```shell-script\n\n```",[2983],{"name":2924,"color":2925},31773,"Latest `tailwindcss` and `@tailwindcss/vite` packages don't compile DaisyUI styles in Nuxt 3 Layers architecture","2025-04-11T20:20:35Z","https://github.com/nuxt/nuxt/issues/31773",0.72119355,{"labels":2990,"number":2996,"owner":2904,"repository":2904,"state":2938,"title":2997,"updated_at":2998,"url":2999,"score":3000},[2991,2994,2995],{"name":2992,"color":2993},"good first issue","fbca04",{"name":2924,"color":2925},{"name":2965,"color":2966},7062,"tailwindcss-purgecss example is not more up to date","2023-01-22T15:34:48Z","https://github.com/nuxt/nuxt/issues/7062",0.72355294,{"description":3002,"labels":3003,"number":3004,"owner":2904,"repository":2905,"state":2938,"title":3005,"updated_at":3006,"url":3007,"score":3008},"Nuxt-Icon currently follows `mdi:home` which is `iconify` format. \r\n\r\nNuxtlabs/ui follows `i-mdi-home` which is `unocss` format.\r\n\r\nIcones, unocss support using multiple formats. \r\n\r\n\r\nWould be great to have support to use `unocss` format in Nuxt-Icon in addition to the current `iconify` format, so that it can be used when working on other libraries which uses the \"unocss\" format. ",[],84,"Feature Request - support for i-mdi-home \"unocss\" format","2023-08-07T11:39:28Z","https://github.com/nuxt/icon/issues/84",0.7284312,["Reactive",3010],{},["Set"],["ShallowReactive",3013],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fqAcJ7vZrbrTWI2t-5bWlvnVHm5xZD8_tvDNiqN6gUiA":-1},"/nuxt/nuxt.com/57"]