\u003C/svg>\n```\n\n\n\nnuxt.config.ts\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: '2024-04-03',\n devtools: { enabled: true },\n modules: ['@nuxt/ui', '@nuxtjs/html-validator'],\n css: ['~/assets/css/main.css'],\n icon: {\n customCollections: [{\n prefix: 'custom',\n dir: './assets/icons'\n }]\n },\n\n // modules\n htmlValidator: {\n usePrettier: false,\n },\n})\n```\n\nin my component SFooter.vue:\n\n```vue\n\u003Cnav aria-label=\"Social Media Links\" class=\"mb-4 flex space-x-6 md:mb-0\">\n \u003Cnuxt-link\n v-for=\"social in socialLinks\"\n :key=\"social.name\"\n :href=\"social.link\"\n :aria-label=\"social.name\"\n class=\"hover:text-gray-700\">\n \u003CUIcon :name=\"social.icon\" class=\"size-5\" aria-hidden=\"true\" />\n \u003Cspan class=\"sr-only\">Visit our {{ social.name }} page\u003C/span>\n \u003C/nuxt-link>\n \u003C/nav>\n\n\n\u003Cscript setup lang=ts>\nconst socialLinks = [\n {\n name: 'SoundCloud',\n link: '#',\n icon: 'i-custom-soundcloud',\n },\n...\n\n```\n\n\n\n\n### Description\n\nI get the warning in console: `WARN [Icon] failed to load icon custom:soundcloud`\n\nand nothing displaying on front end\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3208,3209,3210,3211],{"name":3138,"color":3139},{"name":3156,"color":3157},{"name":3159,"color":3160},{"name":3212,"color":3213},"upstream","78bddb",2609,"custom icons not working","2024-11-15T00:46:19Z","https://github.com/nuxt/ui/issues/2609",0.6909919,{"description":3220,"labels":3221,"number":3224,"owner":3144,"repository":3162,"state":3163,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn my Nuxt 3 project (that uses Nuxt UI `v3.0.0-alpha9`), I have a Vue component like this:\n\n```vue\n\u003Cscript setup lang=\"ts\">\n...\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"section\">\n ...\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cstyle scoped lang=\"scss\">\n@use \"tailwindcss\";\n\n.section + .section {\n @apply mt-8 lg:mt-12;\n}\n\u003C/style>\n```\n\nThe problem is that `@apply mt-8 lg:mt-12;` doesn't work unless I add this to my `nuxt.config.ts`:\n```\npostcss: {\n plugins: {\n \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n },\n},\n```\n\nHowever, when I do this, the Nuxt UI components stop working properly (e.g., Slideover renders at the bottom of the page and with wrong styling). How can I make the `@apply ...` work without breaking the Nuxt UI components?\n\nThis is my `package.json`:\n```json\n{\n \"name\": \"frontend\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"postinstall\": \"husky install && nuxt prepare\",\n \"dev\": \"nuxt dev\",\n \"build\": \"nuxt build\",\n \"preview\": \"nuxt preview\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.9\",\n \"nuxt\": \"latest\",\n \"nuxt-svgo\": \"latest\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"latest\",\n \"@commitlint/config-conventional\": \"latest\",\n \"husky\": \"latest\",\n \"sass\": \"latest\"\n }\n}\n```\n\nThis is my `nuxt.config.ts`:\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: \"2024-04-03\",\n devtools: { enabled: false },\n modules: [\"@nuxt/ui\", \"nuxt-svgo\"],\n css: [\"@/assets/css/main.css\"],\n // postcss: {\n // plugins: {\n // \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n // },\n // },\n appConfig: {\n // https://ui3.nuxt.dev/getting-started/theme#colors\n ui: {\n colors: {\n primary: \"primary\", // Defined in `assets/css/theme.css`\n secondary: \"secondary\", // Defined in `assets/css/theme.css`\n },\n },\n },\n});\n```\n\nThis is my `assets/main.css`:\n```css\n/* https://ui3.nuxt.dev/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css */\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```",[3222,3223],{"name":3198,"color":3199},{"name":3159,"color":3160},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.6911752,{"description":3230,"labels":3231,"number":3246,"owner":3144,"repository":3144,"state":3163,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### Environment\n\nhttps://codesandbox.io/s/amazing-minsky-nwzxcr?file=/nuxt.config.js\n\n### Reproduction\n\nIn the \"nuxt.config.js\" define the build transpile like:\r\n\r\nimport { defineNuxtConfig } from \"nuxt\";\r\n\r\nexport default defineNuxtConfig({\r\n build: {\r\n transpile: [({ isDev }) => isDev && \"lodash\"]\r\n }\r\n});\r\n\r\nThen execute \"npm run build\"\n\n### Describe the bug\n\nThe nuxt build is returns the error in logs section. And lodash is not transpiled.\r\n\r\n\n\n### Additional context\n\nThe functionality work properly when the nuxt.config is done in typescript (\"nuxt.config.ts\").\r\n\r\nConfig from nuxt documentation.\r\nhttps://nuxtjs.org/docs/configuration-glossary/configuration-build/#transpile\n\n### Logs\n\n```shell\nWARN [SSR] Error transforming /sandbox/node_modules/nuxt/dist/app/entry: filename.split is not a function\r\n\r\n at normalizePath (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:11471:21)\r\n at getMatcherString (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:11476:16)\r\n at Object.test (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:11495:33)\r\n at result (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:11511:25)\r\n at node_modules/vite/dist/node/chunks/dep-0fc8e132.js:38123:38\r\n at node_modules/vite/dist/node/chunks/dep-0fc8e132.js:38139:41\r\n at shouldExternalizeForSSR (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:38066:12)\r\n at TransformContext.transform (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:40368:34)\r\n at async Object.transform (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:35579:30)\r\n at async loadAndTransform (node_modules/vite/dist/node/chunks/dep-0fc8e132.js:39888:29)\n```\n",[3232,3234,3237,3240,3243],{"name":3172,"color":3233},"8DEF37",{"name":3235,"color":3236},"good first issue","fbca04",{"name":3238,"color":3239},"3.x","29bc7f",{"name":3241,"color":3242},"vite","3574D1",{"name":3244,"color":3245},"🍰 p2-nice-to-have","0E8A16",14729,"add support for functional `build.transpile` with vite builder","2023-01-19T17:39:28Z","https://github.com/nuxt/nuxt/issues/14729",0.69242805,{"description":3252,"labels":3253,"number":3256,"owner":3144,"repository":3162,"state":3163,"title":3257,"updated_at":3258,"url":3259,"score":3260},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\n- \n\n### Description\n\nUpgraded all deps to the latest and bam Nuxt 3.16.0 is added. We get errors now as Nuxt UI 3 still ships with\n\n`'@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))\n`\n\nAs of Nuxt 3.16.0 ships with @unhead2:\nhttps://nuxt.com/blog/v3-16#unhead-v2\n\nActual error:\n`[@nuxt/scripts 9:42:20 PM] ERROR Nuxt Scripts requires Unhead >= 2, you are using v1.11.20. Please run nuxi upgrade --clean to upgrade...`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3254,3255],{"name":3138,"color":3139},{"name":3159,"color":3160},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.69890904,{"description":3262,"labels":3263,"number":3268,"owner":3144,"repository":3144,"state":3163,"title":3269,"updated_at":3270,"url":3271,"score":3272},"### Version\n\n[v1.4.2](https://github.com/nuxt.js/releases/tag/v1.4.2)\n\n### Reproduction link\n\n[https://-/](https://-/)\n\n### Steps to reproduce\n\nSeveral people (including me) receiving `error TypeError: request.charCodeAt is not a function`\n\nSeems like it's only reproducable when `modules` are included.\n\nRelated: https://github.com/nuxt-community/nuxtent-module/issues/179, https://github.com/nuxt-community/auth-module/issues/229\n\nMore information as I can retrieve\n\n### What is expected ?\n\nNo Error\n\n### What is actually happening?\n\nStart a nuxt app with `npm run dev` and see the error in the console: `error TypeError: request.charCodeAt is not a function`. Breaking for windows-user as the command will stop\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/c7603\">#c7603\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3264,3267],{"name":3265,"color":3266},"pending triage","E99695",{"name":3187,"color":3188},3769,"error TypeError: request.charCodeAt is not a function","2023-01-22T15:30:05Z","https://github.com/nuxt/nuxt/issues/3769",0.7031687,["Reactive",3274],{},["Set"],["ShallowReactive",3277],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRcVrUSmYCzbBTM5FSHnHmSXrNGFv4jEOIOkWc_bDRkY":-1},"/nuxt/nuxt.com/1114"]