\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst route = useRoute();\r\nconst uid = ref(route.params.uid[0] || \"home\");\r\n// Create the prismic endpoint.\r\nconst prism = usePrismic({ type: \"page\", uid: uid.value });\r\nconst { data: page } = await useFetch(prism.endpoint, {\r\n key: uid.value,\r\n params: prism.params,\r\n transform: (data) => {\r\n let result = data.results[0].data;\r\n // Remove unwanted special characters from the Prismic body.\r\n result = JSON.stringify(result);\r\n result = result.replace(/[\\u2028]/g, \"\");\r\n result = JSON.parse(result);\r\n return result;\r\n },\r\n});\r\n\r\n// Prepare the async loading of the slices.\r\nconst sliceList = {\r\n navigation: defineAsyncComponent(() => import(\"~/components/Navigation.vue\")),\r\n landing_hero: defineAsyncComponent(() => import(\"~/components/LandingHero.vue\")),\r\n heading: defineAsyncComponent(() => import(\"~/components/Heading.vue\")),\r\n footer: defineAsyncComponent(() => import(\"~/components/Footer.vue\")),\r\n};\r\n\u003C/script>\r\n```\r\n\r\nDuring SSG, all the content coming from Prismic is properly rendered as HTML, which is awesome.\r\n\r\n#### The issue \r\n\r\nHowever, after building and uploading the page to production, a \"flicker\" appears when visiting the page.\r\nWhen I say flicker, what I mean is: the page is visible, the page disappears, the page re-appears. \r\n\r\nThis is how it looks like on mobile:\r\n\r\n\r\n\r\nI don't encounter the issue when avoiding to dynamically load the components, like this:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CFlex direction=\"col\">\r\n \u003Ctemplate\r\n v-for=\"(slice, index) in page.body\"\r\n :key=\"`${uid}-${slice.slice_type}-${index}`\"\r\n >\r\n \u003CNavigation v-if=\"slice.slice_type === 'navigation'\" :slice=\"slice\" />\r\n \u003CLandingHero v-if=\"slice.slice_type === 'landing-hero'\" :slice=\"slice\" />\r\n \u003CHeading v-if=\"slice.slice_type === 'heading'\" :slice=\"slice\" />\r\n \u003CFooter v-if=\"slice.slice_type === 'footer'\" :slice=\"slice\" />\r\n \u003C/template>\r\n \u003C/Flex>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst route = useRoute();\r\nconst uid = ref(route.params.uid[0] || \"home\");\r\n// Create the prismic endpoint.\r\nconst prism = usePrismic({ type: \"page\", uid: uid.value });\r\nconst { data: page } = await useFetch(prism.endpoint, {\r\n key: uid.value,\r\n params: prism.params,\r\n transform: (data) => {\r\n let result = data.results[0].data;\r\n // Remove unwanted special characters from the Prismic body.\r\n result = JSON.stringify(result);\r\n result = result.replace(/[\\u2028]/g, \"\");\r\n result = JSON.parse(result);\r\n return result;\r\n },\r\n});\r\n\u003C/script>\r\n``` \r\n\r\nHowever, this is of course not maintainable when you have a longer list of components.\r\n\r\n\r\n### Additional context\r\n\r\nTime to share you additional information. Which is where I'm _really_ scratching my head.\r\n\r\n#### @nuxtjs/prismic\r\nI'm aware that what I'm doing is a custom made solution, since @nuxtjs/prismic has a v3 version. However, at the time I was using this, it was still unstable and now the [https://v3.prismic.nuxtjs.org/](https://v3.prismic.nuxtjs.org/) seems to be completely down.\r\n\r\n#### An impact of CloudFlare?\r\nOn production, there are 2 urls. For the sake of privacy, I'm gonna invent some domain names here that aren't related to this project.\r\n\r\nThe first is the official URL created by [CloudFlare pages](https://pages.cloudflare.com/) - which is how we deploy our website.\r\nThis could look like: `my-website-name.pages.dev`\r\nThe second url is added to our DNS. The path is: `nuxt.our-domain.com`, which is proxied to `my-website-name.pages.dev`\r\n\r\nOn the first URL, the flicker doesn't appear, but it does happen on the second url (`nuxt.our-domain.com`)\r\n\r\nThose who know about CloudFlare would probably ask: Did you [disable \"Rocket Loader\"](https://community.cloudflare.com/t/rocket-loader-causes-blink-flicker-on-page-load/27181)?\r\nThe flickering happens even with Rocket Loader disabled.\r\n\r\nDue to this, I'm not sure if it's a Nuxt 3 or a CloudFlare issue. So I do apologize if it ends up being the latter.\r\n\r\nRemember, I can resolve the issue with the second block in the above mentioned bug description, so maybe it's the way the components are loaded dynamically?\r\n\r\n#### Possibly a related issue\r\nThis may or may not be related to this open issue: [useHead causes flicker when hydrating SSR-rendered page](https://github.com/nuxt/nuxt.js/issues/14271). I still encounter the issue without using `useHead`, but since this user is also encountering flickering,\r\n\r\n### Logs\r\n\r\n_No response_",[3228,3231],{"name":3229,"color":3230},"3.x","29bc7f",{"name":3154,"color":3155},15019,"(SSG) Using dynamic components to load a page creates a page flicker","2023-01-19T17:43:50Z","https://github.com/nuxt/nuxt/issues/15019",0.75110984,{"description":3238,"labels":3239,"number":3243,"owner":3157,"repository":3244,"state":3180,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Description\n\nI have no clue where to ask this, so I'm doing it here.\n\nI'm fetching a `.liquid` file and want to automatically create some markdown out of this to put in my `.md` file for nuxt content. I'm pretty sure I'm doing it wrong, but I have quite a lot working already.\n\nI'm now missing the TOC and the `pre` highlighting.\n\n**Custom content component**\n```vue\n\u003Cscript setup>\nconst route = useRoute();\nconst snippet = route.params.slug[route.params.slug.length - 1];\nconst url = useRequestURL();\nconst fetchUrl = `${url.origin}/content${route.path}/${snippet}.liquid`;\n\nconst { data } = await useAsyncData(\n `${snippet}-docs`,\n async () => {\n const res = await fetch(fetchUrl);\n return await res.text();\n },\n {\n transform: async (code) => {\n const docs = code.match(\n /{%-?\\s*doc\\s*-?%}([\\s\\S]*?){%-?\\s*enddoc\\s*-?%}/\n )?.[1];\n\n const description = docs?.match(/@description\\s+(.*?)(?=\\s*@|\\s*$)/)?.[1];\n\n const example = docs?.match(/@example\\s+([^\\n]+)/)?.[1];\n\n const params = docs\n ?.match(/@param\\s+{[^}]+}\\s+\\[[^\\]]+\\]\\s+-\\s+[^\\n]+/g)\n ?.map((param) => {\n const [, type, name, description] = param.match(\n /@param\\s+{([^}]+)}\\s+\\[([^\\]]+)\\]\\s+-\\s+(.+)/\n );\n return {\n type,\n name: name.trim(),\n required: name.includes('[') ? 'Yes' : 'No',\n description: description.trim()\n };\n });\n\n return {\n ast,\n code,\n description,\n example,\n params\n };\n }\n }\n);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CProseH2>Description\u003C/ProseH2>\n \u003CProseP>{{ data?.description }}\u003C/ProseP>\n\n \u003CProseH2>Example\u003C/ProseH2>\n \u003CProsePre code=\"liquid\" language=\"liquid\">\n {{ data?.example }}\n \u003C/ProsePre>\n\n \u003CProseH2>Parameters\u003C/ProseH2>\n \u003CProseTable>\n \u003CProseThead>\n \u003CProseTr>\n \u003CProseTh>Type\u003C/ProseTh>\n \u003CProseTh>Name\u003C/ProseTh>\n \u003CProseTh>Required\u003C/ProseTh>\n \u003CProseTh>Description\u003C/ProseTh>\n \u003C/ProseTr>\n \u003C/ProseThead>\n \u003CProseTbody>\n \u003CProseTr v-for=\"param in data?.params\" :key=\"param.name\">\n \u003CProseTd>\n \u003CProseCode>{{ param.type }}\u003C/ProseCode>\n \u003C/ProseTd>\n \u003CProseTd>\n \u003CProseCode>{{ param.name }}\u003C/ProseCode>\n \u003C/ProseTd>\n \u003CProseTd>{{ param.required }}\u003C/ProseTd>\n \u003CProseTd>{{ param.description }}\u003C/ProseTd>\n \u003C/ProseTr>\n \u003C/ProseTbody>\n \u003C/ProseTable>\n\n \u003CProseH2>Usage\u003C/ProseH2>\n \u003CProsePre language=\"liquid\" :filename=\"`${snippet}.liquid`\">\n {{ data?.code }}\n \u003C/ProsePre>\n \u003C/div>\n\u003C/template>\n```\n\n**Liquid file to fetch**\n```liquid\n{%- doc -%}\n @description This snippet renders a button element.\n\n @param {string} [label] - The label of the button.\n\n @example {%- render 'button', label: 'Button', icon: 'icon-name' -%}\n{%- enddoc -%}\n\nRest op the code\n```\n\n**Current output**\n\u003Cimg width=\"1209\" height=\"1036\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/cc4359dd-2df9-4793-b22c-3bc0214b48a3\" />\n\n**Expected output**\n\u003Cimg width=\"1102\" height=\"1078\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/06fa416e-3837-486e-ba54-d3e5d5b7eee0\" />\n\nCould someone help me out a bit here?",[3240],{"name":3241,"color":3242},"question","d876e3",4737,"ui","Highlight fetched code with shikijs","2025-08-14T12:36:12Z","https://github.com/nuxt/ui/issues/4737",0.75150853,{"labels":3250,"number":3257,"owner":3157,"repository":3157,"state":3180,"title":3258,"updated_at":3259,"url":3260,"score":3261},[3251,3253,3254],{"name":3189,"color":3252},"8DEF37",{"name":3229,"color":3230},{"name":3255,"color":3256},"upstream","E8A36D",13345,"non-`\u003Chead>` locations for scripts","2023-01-19T17:07:31Z","https://github.com/nuxt/nuxt/issues/13345",0.75644624,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fTEX7itvWG8hcYijXpwFyV52mzTJ8Oj7pcKdj0Vq4fyE":-1},"/nuxt/nuxt.com/497"]