\r\n Loading\r\n \u003C/div>\r\n \u003C/template>\r\n \u003Cdiv class=\"content\" ref=\"someRef\">\r\n This text should NOT be large!\r\n Remove the \u003Cpre>ref=\"someRef\"\u003C/pre> from the parent and it works\r\n \u003C/div>\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\r\n\r\n**Expected behaviour when loading the page:**\r\nA big loading spinner, and, when everything is done loading, some normal text, like this:\r\n\r\n\r\n**Instead,** you get this:\r\n\r\n\r\nWhen you remove the `ref=\"someRef\"` from the content div, it works as expected",[],"nuxt","icon","open","Unexpected behaviour when using an Icon within ClientOnly fallback","2023-12-18T12:08:48Z","https://github.com/nuxt/icon/issues/129",0.74437904,{"description":2873,"labels":2874,"number":2878,"owner":2865,"repository":2865,"state":2879,"title":2880,"updated_at":2881,"url":2882,"score":2883},"If i disable javascript in dev tools, to take a look at the html structure i can see our css is gone.\r\nBefore we did the update it was included like this.\r\n\r\n\u003Chead> \r\n\u003Cstyle data-vue-ssr-id=\"fweoi545y7897h34ht5h.......\">\u003C/style>\r\n\u003C/head>\r\n\r\nThis results in a flash when we load the page :( \r\nThe css looks ok after hydration. I have looked at https://github.com/nuxt/nuxt.js/issues/754\r\n\r\nNothing is mentioned about css changes. Can someone help?\r\nThanks\r\n\r\nArun\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/c731\">#c731\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2875],{"name":2876,"color":2877},"2.x","d4c5f9",861,"closed","inline css is not included after update to 1.0.0-alpha2","2023-01-18T15:39:54Z","https://github.com/nuxt/nuxt/issues/861",0.7223908,{"description":2885,"labels":2886,"number":2891,"owner":2865,"repository":2865,"state":2879,"title":2892,"updated_at":2893,"url":2894,"score":2895},"Hi, when i go to my website and look in network doc, i see html without style. Can i get there page with style? \r\nBuild config:\r\n ```\r\n{\r\n optimizeCss: true,\r\n extractCSS: true,\r\n minimize: true,\r\n parallel: true,\r\n ...(!isDev && {\r\n extractCSS: {\r\n ignoreOrder: true,\r\n },\r\n }),\r\n ...(!isDev && {\r\n html: {\r\n minify: {\r\n collapseBooleanAttributes: true,\r\n decodeEntities: true,\r\n minifyCSS: true,\r\n minifyJS: true,\r\n processConditionalComments: true,\r\n removeEmptyAttributes: true,\r\n removeRedundantAttributes: true,\r\n trimCustomFragments: true,\r\n useShortDoctype: true,\r\n },\r\n },\r\n }),\r\n splitChunks: {\r\n layouts: true,\r\n pages: true,\r\n commons: true,\r\n },\r\n optimization: {\r\n minimize: !isDev,\r\n splitChunks: {\r\n chunks: 'all',\r\n automaticNameDelimiter: '.',\r\n cacheGroups: {\r\n styles: {\r\n name: 'styles',\r\n test: /\\.(css|vue)$/,\r\n chunks: 'all',\r\n enforce: true,\r\n },\r\n },\r\n },\r\n },\r\n publicPath: 'https://test-cdn.com/ss-front',\r\n ...(!isDev && {\r\n vendor: [\r\n 'bootstrap-vue/nuxt',\r\n '@nuxtjs/axios',\r\n '@nuxtjs/pwa',\r\n '@nuxtjs/device',\r\n 'cookie-universal-nuxt',\r\n 'nuxt-i18n',\r\n 'nuxt-gmaps',\r\n ],\r\n }),\r\n transpile: ['vee-validate/dist/rules'],\r\n filenames: {\r\n app: ({ isDev }) => isDev ? '[name].js' : '[name].[contenthash].js',\r\n chunk: ({ isDev }) => isDev ? '[name].js' : '[name].[contenthash].js',\r\n css: ({ isDev }) => isDev ? '[name].css' : '[name].[contenthash].css',\r\n },\r\n```\r\nmode: universe. \r\n\r\n### Versions\r\n\r\n- nuxt: 2.14.11\r\n- node: local - 14.15.1, server - 13.1, has this prooblem in booth env.\r\n\r\nIn index.ssr.html after build \r\n```\r\n\u003C!doctype html>\r\n\u003Chtml {{ html_attrs }}>\r\n \u003Chead {{ head_attrs }}>\r\n {{ HEAD }}\r\n \u003C/head>\r\n \u003Cbody {{ body_attrs }}>\r\n {{ APP }}\r\n \u003C/body>\r\n\u003C/html>\r\n```\r\n\r\nCan i have in doc page with style?\r\n",[2887,2890],{"name":2888,"color":2889},"pending triage","E99695",{"name":2876,"color":2877},8502,"Server HTML generate without style","2023-01-22T15:38:24Z","https://github.com/nuxt/nuxt/issues/8502",0.72462535,{"description":2897,"labels":2898,"number":2908,"owner":2865,"repository":2909,"state":2879,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Description\r\n\r\nSometimes, I'd like to programmatically disable a form (e.g. until certain conditions on the page are met, or while the current submission request is pending). Currently, the form doesn't have such behavior\r\n\r\n### Additional context\r\n\r\n_No response_",[2899,2902,2905],{"name":2900,"color":2901},"enhancement","a2eeef",{"name":2903,"color":2904},"wontfix-v2","ffffff",{"name":2906,"color":2907},"v3","49DCB8",2150,"ui","Add `disabled` state to `UForm` component","2024-09-06T16:59:53Z","https://github.com/nuxt/ui/issues/2150",0.72777426,{"labels":2915,"number":2923,"owner":2865,"repository":2865,"state":2879,"title":2924,"updated_at":2925,"url":2926,"score":2927},[2916,2919,2921,2922],{"name":2917,"color":2918},"question","cc317c",{"name":2920,"color":2904},"stale",{"name":2888,"color":2889},{"name":2876,"color":2877},7325,"CSS in HTML head AND in JS chunk","2023-01-22T15:34:50Z","https://github.com/nuxt/nuxt/issues/7325",0.7300705,{"description":2929,"labels":2930,"number":2933,"owner":2865,"repository":2865,"state":2879,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Version\n\n[v2.4.5](https://github.com/nuxt.js/releases/tag/v2.4.5)\n\n### Reproduction link\n\n[https://codesandbox.io/s/kx9pp6k1o](https://codesandbox.io/s/kx9pp6k1o)\n\n### Steps to reproduce\n\nOpen the repro and have a look at the rendered HTML at [https://kx9pp6k1o.sse.codesandbox.io/](view-source:https://kx9pp6k1o.sse.codesandbox.io/).\n\n### What is expected ?\n\nAn empty, null or undefined title is not rendered\n\n### What is actually happening?\n\n`\u003Ctitle data-n-head=\"true\">\u003C/title>` is added to rendered HTML\n\n### Additional comments?\n\nI am trying to build a microfrontend architecture using Nuxt.js, which is why I need to be able to render HTML without surrounding `html`, `head` and `body` elements, to be able to compose different applications together.\n\nI have removed the `head` option from `nuxt.config.js` and created a simplified `app.html` with only `{{ HEAD }} {{ APP }}`. I could remove `{{ HEAD }}`, but I want to keep the critical CSS and preload/prefetch hints. \n\nAn alternative solution would be to allow more fine-grained control in the app template, for example by extending the `{{ HEAD }}` placeholder with `{{ HEAD.STYLE }}`, `{{ HEAD.LINK }}` and so on.\n\n\u003C!--cmty-->\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/c8866\">#c8866\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2931,2932],{"name":2888,"color":2889},{"name":2876,"color":2877},5281,"Empty \u003Ctitle> element when removing head option from config","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5281",0.73071367,{"description":2939,"labels":2940,"number":2941,"owner":2865,"repository":2866,"state":2879,"title":2942,"updated_at":2943,"url":2944,"score":2945},"`\u003CIcon name=\"uil:github\" color=\"red\" />`\r\nreturns\r\n\r\n**App.config.ts**\r\n```\r\n// https://github.com/nuxt-modules/icon#configuration-%EF%B8%8F\r\nexport default defineAppConfig({\r\n icon: {\r\n size: \"300%\", // default \u003CIcon> size applied\r\n class: \"icon\", // default \u003CIcon> class applied\r\n mode: \"css\", // svg || css\r\n aliases: {\r\n nuxt: \"logos:nuxt-icon\",\r\n },\r\n },\r\n})\r\n```\r\n",[],176,"Add universal support for color attribute (similar to CSS icons)","2024-07-15T16:06:31Z","https://github.com/nuxt/icon/issues/176",0.7331289,{"description":2947,"labels":2948,"number":352,"owner":2865,"repository":2865,"state":2879,"title":2951,"updated_at":2952,"url":2953,"score":2954},"First let me say, Nuxt is awesome! I'm looking forward to the 1.0 release!\r\n\r\nOk so when working on m templates, eventually I get the below (screenshot) effect on my pages. The only way to fix it it seems is to go into my layout and delete the contents of the `\u003Chead>` block, save and reload the page manually, then add it back in. After that all goes back to normal, but not for long before it creeps up again.\r\n\r\nHere's my page:\r\n```\r\n\u003Ctemplate lang=\"jade\">\r\n div\r\n ThickPageBanner\r\n CustomerLogin\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n import ThickPageBanner from '~components/ThickPageBanner'\r\n import CustomerLogin from '~components/CustomerLogin'\r\n\r\n export default {layout: 'public',components: {ThickPageBanner, CustomerLogin}}\r\n\u003C/script>\r\n```\r\n\r\nHere's my layout:\r\n```\r\n\u003Ctemplate>\r\n \u003Chtml class=\"no-js\" lang=\"\">\r\n \u003Chead>\r\n \u003Cmeta charset=\"utf-8\">\r\n \u003Cmeta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n \u003Ctitle>Title\u003C/title>\r\n \u003Cmeta name=\"description\" content=\"\">\r\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\r\n \u003Clink rel=\"icon\" type=\"image/png\" href=\"favicon.png\">\r\n\r\n \u003Clink type=\"text/css\" rel=\"stylesheet\" href=\"http://fast.fonts.net/cssapi/e1ef451d-c61f-4ad3-b4e0-e3d8adb46d89.css\"/>\r\n \u003Clink rel=\"stylesheet\" href=\"/assets/css/main-min.css\">\r\n\r\n \u003Cscript src=\"/assets/js/dist/modernizr-custom.js\">\u003C/script>\r\n \u003C/head>\r\n \u003Cbody class=\"\">\r\n \u003C!--[if lt IE 8]>\r\n \u003Cp class=\"browserupgrade\">You are using an \u003Cstrong>outdated\u003C/strong> browser. Please \u003Ca href=\"http://browsehappy.com/\">upgrade your browser\u003C/a> to improve your experience.\u003C/p>\r\n \u003C![endif]-->\r\n \u003Cdiv class=\"wrapper\">\r\n \u003CSiteHeader/>\r\n \u003Cmain class=\"main\">\r\n \u003Cnuxt/>\r\n \u003C/main>\u003C!-- main -->\r\n \u003CSiteFooter/>\r\n \u003C/div>\u003C!-- wrapper -->\r\n\r\n\r\n \u003C!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->\r\n \u003Cscript src=\"http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\">\u003C/script>\r\n \u003Cscript src=\"/assets/js/dist/main-min.js\">\u003C/script>\r\n\r\n \u003C/body>\r\n \u003C/html>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport SiteHeader from '~components/SiteHeader'\r\nimport SiteFooter from '~components/SiteFooter'\r\n\r\nexport default {\r\n components: {\r\n SiteHeader,\r\n SiteFooter\r\n }\r\n}\r\n\u003C/script>\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://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c138\">#c138\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2949,2950],{"name":2917,"color":2918},{"name":2876,"color":2877},"Odd behavior when working in npm run dev","2023-01-18T15:38:31Z","https://github.com/nuxt/nuxt/issues/163",0.7347331,{"description":2956,"labels":2957,"number":2973,"owner":2865,"repository":2865,"state":2879,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n**!!! It only appears in production mode. Run** `yarn build && yarn preview`\r\n\r\nhttps://codesandbox.io/p/devbox/affectionate-lederberg-vz2xsy\r\n\r\n### Describe the bug\r\nWhen a component is used across multiple pages, the styles associated with that component do not appear as inline styles. This issue arises because these components are likely candidates for quick loading. For instance, I have an icon component that appears on every page. From a performance perspective, it's crucial to load the styles from this component as soon as possible, similar to critical CSS. In a real application, there may be components responsible for establishing the page layout, and they should ideally be loaded as soon as possible.\r\n\r\nIn reproduction, you'll notice that the \"IconComponent\" turns red once the styles from the file are applied. This delay increases the First Contentful Paint (FCP). Those styles should be loaded as critical css (which worked that way in nuxt 2).\r\n\r\n\r\n\r\nHowever, if you delete the `test.vue` page, the styles from the \"IconComponent\" are added as inline CSS.\r\n\r\n\r\n\r\nIs this behavior expected? Is there a method to enforce inline styles for certain components?\r\n\r\nCould this issue be related to https://github.com/nuxt/nuxt/issues/22507 ?\r\n\r\n### Additional context\r\n\r\nEven when I add this component as suggested here https://github.com/nuxt/nuxt/issues/22507#issuecomment-1757833275\r\nThose styles are still not included as inline.\r\nhttps://codesandbox.io/p/devbox/gifted-noyce-j3rncx\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2958,2961,2964,2967,2970],{"name":2959,"color":2960},"3.x","29bc7f",{"name":2962,"color":2963},"bug","d73a4a",{"name":2965,"color":2966},"vite","3574D1",{"name":2968,"color":2969},"🔨 p3-minor","FBCA04",{"name":2971,"color":2972},"inline styles","68AF97",25420,"missing important inline styles from components used across multiple pages","2024-01-28T21:27:14Z","https://github.com/nuxt/nuxt/issues/25420",0.7350078,{"description":2979,"labels":2980,"number":2982,"owner":2865,"repository":2865,"state":2879,"title":2983,"updated_at":2984,"url":2985,"score":2986},"I'm checking out nuxt.js for the first time. I just used the vue-cli to install the starter project. I run the project and notice that with every refresh the page has a pretty bad flash of unstyled content. Everything starts off left-aligned and then finally snaps into proper place.\r\n\r\nIs this an issue with the starter template or something deeper with nuxt.js?\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://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c122\">#c122\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2981],{"name":2876,"color":2877},143,"Very bad flash of unstyled content when trying the starter template","2023-01-18T15:38:30Z","https://github.com/nuxt/nuxt/issues/143",0.7355641,["Reactive",2988],{},["Set"],["ShallowReactive",2991],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fH6r-44gZCLPw_J42j-luiA9pNGlW0jMwIzcNTklc0O0":-1},"/nuxt/icon/24"]