\r\n\r\n\r\nHowever, in production build, the style works. But the css link is added asynchronously, so there is no style on first render causing the page to blink.\r\n\u003Cimg width=\"699\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/1401172/628cf01e-b84e-43d7-af43-f8c691396e24\">\r\n\r\n",[2895],{"name":2885,"color":2886},26696,"Nuxt 3.11 with webpack builder lose style in SFC","2024-06-30T11:04:41Z","https://github.com/nuxt/nuxt/issues/26696",0.6992244,{"description":2902,"labels":2903,"number":2906,"owner":2874,"repository":2907,"state":2908,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v18.19.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/test-utils/module\n\n### Reproduction\n\nhttps://github.com/chronicadventure/nuxt-bug\r\n\r\njust run `npm test` and the console will error out. *Note* you don't even need an actual test, just the import causes the entire file to fail.\n\n### Describe the bug\n\nImporting `import { mockNuxtImport } from '@nuxt/test-utils/runtime'` as stated in the docs causes the entire test file to fail.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nDEV v1.4.0 C:/Users/AdrianCampos/BugRepo/repro\r\n\r\n ❯ tests/random.nuxt.test.js (0)\r\n\r\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯\r\n\r\n FAIL tests/random.nuxt.test.js [ tests/random.nuxt.test.js ]\r\nError: Failed to load url #imports (resolved id: #imports) in C:/Users/AdrianCampos/BugRepo/node_modules/@nuxt/test-utils/dist/runtime-utils/index.mjs. Does the file exist?\r\n ❯ loadAndTransform ../node_modules/vite/dist/node/chunks/dep-B-u6xNiR.js:53832:21\r\n\r\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯\r\n\r\n Test Files 1 failed (1)\r\n Tests no tests\r\n Start at 21:58:52\r\n Duration 2.22s (transform 69ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 846ms)\r\n\r\n\r\n FAIL Tests failed. Watching for file changes...\r\n press h to show help, press q to quit\n```\n",[2904],{"name":2885,"color":2905},"5D08F5",800,"test-utils","closed","Failed to load url #imports after importing mockNuxtImport","2024-05-26T19:14:39Z","https://github.com/nuxt/test-utils/issues/800",0.6704456,{"description":2914,"labels":2915,"number":2920,"owner":2874,"repository":2875,"state":2908,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### Environment\r\n\r\n- \"@nuxt/ui\": \"^2.18.6\",\r\n- \"nuxt\": \"^3.13.2\",\r\n- \"vue\": \"^3.5.10\",\r\n\r\n### Version\r\n\r\nv2.18.6\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch\r\n\r\n### Description\r\n\r\nHello,\r\n\r\nI'm having a important nuxt ui mono repo project and I'm encountering problems with nuxt/ui since version 6.12.0 of @nuxtjs/tailwindcss. \r\n\r\nI was forced to stay in an old version of nuxt/ui to don't have the problem : \r\n\r\n```\r\n \"pnpm\": {\r\n \"overrides\": {\r\n \"@nuxtjs/tailwindcss\": \"6.11.4\",\r\n \"@nuxt/ui\": \"2.15.2\"\r\n }\r\n },\r\n```\r\n\r\n# What happens ? \r\n\r\nAt first launch, css classes used in nuxt ui components are not correctly taken into account. \r\nIt's necessary to restart a second time the app to have the correct display\r\n\r\nThe bug is present since the version 6.12.0 of nuxtjs/tailwindcss. Maybe some effect of the First Class HMR.\r\n\r\n## Step to reproduce \r\n\r\nThe code at the following link is a minimal reproduction of my project structure : https://github.com/guirak/NuxtUiTailwindContentPurgedAtFirstLaunch\r\n\r\n- From the root project path, launch the following command : \r\n\r\n```bash\r\n# Clear the build \r\n./scripts/CleanProject.bash\r\n\r\n# Install and prepare \r\npnpm i; pnpm run dev:prepare\r\n\r\n# Launch the app\r\ncd apps/mmi-order-front-office\r\npnpm run dev\r\n```\r\n\r\n**The tailwind classes used in apps and modules are correctly displayed but the tailwind classes defined in the nuxt-ui components are not taken into account.**\r\n\r\n\r\n\r\n- Stop and restart the server\r\n\r\n```bash\r\npnpm run dev\r\n```\r\n\r\n**All tailwind classes are correctly taken into account.**\r\n\r\n\r\n\r\n\r\n\r\nThe problem is present too when building the prod version with **pnpm run build**\r\n\r\n\r\nThe problem seems to happens when using nuxt ui in a nuxt module. Please, have you any ideas, to solve this problem. \r\n\r\n\r\nThank you\r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2916,2917],{"name":2868,"color":2869},{"name":2918,"color":2919},"upstream","78bddb",2282,"Since Tailwind First Class HMR, nuxt-ui components css classes not taken into account at first launch","2024-10-18T09:16:15Z","https://github.com/nuxt/ui/issues/2282",0.67676127,{"description":2926,"labels":2927,"number":2931,"owner":2874,"repository":2875,"state":2908,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nThank you in advance for your help!\n\nWe’re using Nuxt UI Pro for styling in our application, which primarily uses a language other than English. When working with the `SelectMenu` component and enabling the `multiple` prop, the displayed value shows \"1 selected\" (or similar text like \"{x-number} selected\"). Instead, we’d like to display the actual selected value(s) of the SelectMenu, like when NOT using the `multiple` prop, if just one item is selected. And any more than that, we need to display the \"{x-number} selected\" it in our language, not English.\n\nDo I need to create a custom wrapper component for this, or is there a simpler way to customize the displayed text? I’m not that deep on frontend development and manipulating package classes in Nuxt 3, so I’d appreciate guidance on how to approach this issue.\n\nI’ve reviewed the source code here: https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue but couldn’t figure out how to achieve this.\n\nI see the code where the const for the label is generated, but whats the best approach to change that for us?\n\n```\n const label = computed(() => {\n if (!props.modelValue) return null\n\n if (Array.isArray(props.modelValue) && props.modelValue.length) {\n return `${props.modelValue.length} selected`\n } else if (['string', 'number'].includes(typeof props.modelValue)) {\n return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue\n }\n\n return accessor(props.modelValue as Record\u003Cstring, any>, props.optionAttribute)\n })\n```\n\nAny advice or direction would be greatly appreciated!",[2928],{"name":2929,"color":2930},"question","d876e3",2867,"How can I change the \u003CUSelectMenu> to display the value of a selected item, instead of \"1 selected\" when adding the multiple prop","2024-12-09T11:50:53Z","https://github.com/nuxt/ui/issues/2867",0.67693406,{"description":2937,"labels":2938,"number":2944,"owner":2874,"repository":2945,"state":2908,"title":2946,"updated_at":2947,"url":2948,"score":2949},"On sub-pages (paths longer than 1 level) 404 is not triggered\n\nEx:\n\nhttps://nuxt.com/unknown => Triggers 404\nhttps://nuxt.com/modules/unknown => Broken page",[2939,2941],{"name":2868,"color":2940},"ff281a",{"name":2942,"color":2943},"SEO","01403D",1046,"nuxt.com","404s handling","2023-06-06T12:14:30Z","https://github.com/nuxt/nuxt.com/issues/1046",0.67696506,{"description":2951,"labels":2952,"number":2953,"owner":2874,"repository":2954,"state":2908,"title":2955,"updated_at":2956,"url":2957,"score":2958},"I am using the module with `fontshare` as a provider. When checking `pageInsights` it shows that `@font-face` is not being used. When adding `fontain` module it resolves the issue.\r\n\r\n\u003Cimg width=\"741\" alt=\"Screenshot 2024-06-22 at 23 39 50\" src=\"https://github.com/nuxt/fonts/assets/33263129/a91b98cd-7b15-4a13-9588-35bd8c0a0366\">\r\n\r\n\r\n\u003Cimg width=\"663\" alt=\"Screenshot 2024-06-22 at 22 38 07\" src=\"https://github.com/nuxt/fonts/assets/33263129/0fe5a298-1dd2-4fb3-b476-520be7d2ac08\">\r\n\r\n\r\nwhen using `fontain`\r\n\r\n\r\n\u003Cimg width=\"964\" alt=\"Screenshot 2024-06-22 at 22 34 07\" src=\"https://github.com/nuxt/fonts/assets/33263129/dca00dbe-a0bc-4163-a55b-e584f97a2506\">\r\n\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v20.14.0`\r\n- Nuxt Version: `3.12.2`\r\n- CLI Version: `3.12.0`\r\n- Nitro Version: `2.9.6`\r\n- Package Manager: `npm@10.7.0`\r\n- Builder: `-`\r\n- User Config: `devtools`, `future`, `modules`, `runtimeConfig`, `app`, `routeRules`, `devServer`, `build`, `fonts`, `tailwindcss`\r\n- Runtime Modules: `@nuxt/eslint@0.3.13`, `@nuxtjs/tailwindcss@6.12.0`, `@nuxt/image@1.7.0`, `@nuxt/fonts@0.7.0`, `@nuxtjs/fontaine@0.4.3`\r\n- Build Modules: `-`\r\n",[],182,"fonts","`@font-face` not used with `fontshare` provider","2024-09-23T12:32:00Z","https://github.com/nuxt/fonts/issues/182",0.6798041,{"description":2960,"labels":2961,"number":2965,"owner":2874,"repository":2954,"state":2908,"title":2966,"updated_at":2967,"url":2968,"score":2969},"Hi! I've got a misterious problem with nuxt/fonts\nSometimes when deploy I get this kind of error (5 times out of 15 deploys)\n\nThat's not a versel bug, I've tried to run locally `npm run build` about 20 itmes and 5 of them ended up with the same error. \n\nMy configuration:\n\n `\"@nuxt/fonts\": \"0.10.2\"`\n`\"nuxt\": \"3.13.2\",`\n ```export default defineNuxtConfig({\n components: [\n {\n path: \"~/components\",\n global: true,\n },\n ],\n\n devtools: { enabled: false },\n\n css: [\"~/assets/styles/_global.scss\"],\n\n modules: [\n \"@nuxt/fonts\",\n \"nuxt-icons\",\n \"@nuxt/eslint\",\n \"nuxt-quasar-ui\",\n \"@pinia/nuxt\",\n \"@nuxtjs/device\",\n \"@nuxt/image\",\n \"@nuxtjs/seo\",\n \"@nuxtjs/robots\",\n \"nuxt-schema-org\",\n \"nuxt-link-checker\",\n \"@nuxtjs/sitemap\",\n \"nuxt-seo-experiments\",\n \"@nuxtjs/i18n\",\n \"@nuxt/scripts\",\n ],\n\n plugins: [\n \"~/plugins/rest-api.js\",\n { src: \"~/plugins/sentry.ts\", mode: \"client\" },\n { src: \"~/plugins/error-handler.ts\", mode: \"client\" },\n { src: \"~/plugins/image-error.ts\", mode: \"client\" },\n ],\n\n // scripts\n $production: {\n },\n\n $development: {\n },\n\n //SEO\n sitemap: {\n enabled: true,\n urls: async () => await getSiteMap(),\n defaults: {\n changefreq: \"daily\",\n priority: 1,\n lastmod: new Date(),\n },\n },\n robots: {\n enabled: true,\n disallow: [\"/admin\", \"/ui-kit\", \"/profile\", \"/third-party-auth\"],\n allow: \"/\",\n },\n ogImage: {\n enabled: false,\n },\n schemaOrg: {\n enabled: true,\n identity: {\n },\n defaults: false,\n reactive: true,\n },\n seo: {\n automaticDefaults: false,\n fallbackTitle: false,\n },\n linkChecker: {\n enabled: true,\n },\n seoExperiments: {\n enabled: true,\n },\n\n site: {\n\n },\n\n app: {\n head: {\n },\n },\n //SEO\n\n //images\n image: {\n format: [\"webp\", \"png\", \"svg\"],\n },\n //images\n\n //langs\n i18n: {\n legacy: false,\n locales: [\n {\n code: \"en\",\n name: \"English\",\n iso: \"en-US\",\n file: \"en.json\",\n },\n {\n code: \"de\",\n name: \"Deutsch\",\n iso: \"de-DE\",\n file: \"de.json\",\n },\n ],\n messages: {\n en: {},\n },\n defaultLocale: \"en\",\n strategy: \"prefix_except_default\",\n lazy: true,\n langDir: \"locales/\",\n detectBrowserLanguage: {\n useCookie: true,\n cookieKey: \"i18n_redirected\",\n alwaysRedirect: true,\n fallbackLocale: \"en\",\n },\n },\n //langs\n\n //vite\n vite: {\n css: {\n preprocessorOptions: {\n scss: {\n additionalData: '@use \"~/assets/styles/variables/_mixins.scss\" as *;',\n },\n },\n },\n build: {\n sourcemap: true,\n rollupOptions: {\n output: {\n // manualChunks: undefined,\n },\n },\n // cssCodeSplit: false,\n },\n\n plugins: [\n sentryVitePlugin({\n }),\n ],\n },\n //vite\n\n //ui\n quasar: {\n lang: \"ru\",\n plugins: [\"Dialog\", \"Notify\", \"Loading\", \"AppVisibility\"],\n },\n //ui\n\n //env\n runtimeConfig: {\n devtools: {\n enabled: true,\n },\n public: {\n },\n },\n //env\n\n //nitro\n nitro: {\n prerender: {\n // crawlLinks: true,\n routes: [\"/sitemap.xml\", \"/robots.txt\"],\n },\n compressPublicAssets: true,\n },\n //nitro\n\n //prerender\n routeRules: {\n },\n //prerender\n\n router: {\n options: {\n scrollBehaviorType: \"smooth\",\n },\n },\n\n //build\n build: {\n analyze: true,\n },\n\n //build\n\n //hooks\n hooks: {\n // \"build:before\": () => {\n // console.log(\"Running ESLint...\");\n // try {\n // execSync(\"pnpm run lint\", { stdio: \"inherit\" });\n // } catch (error) {\n // console.error(\"ESLint found issues\");\n // }\n // },\n },\n //hooks\n\n //other\n typescript: {\n strict: true,\n },\n ssr: false,\n compatibilityDate: \"2024-11-10\",\n //other\n});\n```\n----------\n```\n.dm-sans {\n font-family: \"DM Sans\", sans-serif;\n font-optical-sizing: auto;\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \"Cabinet Grotesk\";\n src: url(\"~/assets/fonts/CabinetGrotesk-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n}\n\n@font-face {\n font-family: \"Cabinet Grotesk\";\n src: url(\"~/assets/fonts/CabinetGrotesk-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n}\n@font-face {\n font-family: \"DM Sans\";\n src: url(\"~/assets/fonts/DMSans-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n}\n\n@font-face {\n font-family: \"DM Sans\";\n src: url(\"~/assets/fonts/DMSans-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n}\n\n.cabinet-grotesk {\n font-family: \"Cabinet Grotesk\", sans-serif;\n font-optical-sizing: auto;\n font-weight: normal;\n font-style: normal;\n}\n```\n\nIs there any one with the similar problem? \n\n",[2962],{"name":2963,"color":2964},"duplicate","cfd3d7",408,"Family injection fetch failed","2024-12-05T02:26:06Z","https://github.com/nuxt/fonts/issues/408",0.6834567,{"description":2971,"labels":2972,"number":2980,"owner":2874,"repository":2874,"state":2908,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.5.2\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@8.19.4\r\n- Builder: vite\r\n- User Config: vite, build\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\n**Repo:** https://github.com/ThornWalli/nuxt-testing/tree/feature/missing-component-style-tag\r\n```\r\nnpm i \r\nnpm run generate\r\n```\r\n\r\nTo compare, look in the file `.output/public/index.html`.\r\n\r\n**Vite Config**\r\n```\r\n{\r\n vite: {\r\n build: {\r\n cssCodeSplit: false\r\n }\r\n },\r\n}\r\n```\r\n\r\nThere are two pages:\r\n\r\n- Index `pages/index.vue`\r\n- Page 1 `pages/page-1.vue`\r\n\r\nThere are two components:\r\n\r\n- ComponentA `components/ComponentA.vue`\r\n- ComponentB `components/ComponentB.vue`\r\n\r\nOn the index page ComponentA and ComponentB are implemented.\r\n\r\nOn the page \"Page 1\" ComponentB is implemented.\r\n\r\n\r\n### Describe the bug\r\n\r\nOn the \"Index\" page, the style tag of ComponentB is missing if it is implemented on the \"Page 1\" page.\r\n\r\n\r\n\r\nIf the page \"Page 1\" is ignored (`.nuxtignore`), both style tags are present in the page \"Index\".\r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2973,2976,2977],{"name":2974,"color":2975},"3.x","29bc7f",{"name":2868,"color":2869},{"name":2978,"color":2979},"🔨 p3-minor","FBCA04",21381,"Component StyleTags in SSR incorrect with builder `vite` with `cssCodeSplit: false`","2023-09-11T11:32:33Z","https://github.com/nuxt/nuxt/issues/21381",0.68373835,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYMWeG9fiyekR5d2W5KJ-pgwnYk2Fd0a11EpF0tgQ4ec":-1},"/nuxt/ui/3216"]