` like this:\n\n```vue\n\u003Ctemplate>\n \u003CNuxtLoadingIndicator />\n \u003CAppNavbar />\n \u003Cdiv class=\"h-32\" />\n \u003CUContainer>\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UContainer>\n \u003Cdiv class=\"h-32\" />\n \u003CAppFooter />\n\u003C/template>\n```\nmy index page on page/\n\n```vue\n \u003Ctemplate>\n \u003Cmain class=\"min-h-screen\">\n \u003Cdiv class=\"space-y-24\">\n \u003CHomeIntro />\n \u003CHomePremiumService />\n \u003CHomeWork />\n \u003CHomeSocialLinks />\n \u003CHomeFeaturedProjects />\n \u003CHomeFeaturedArticles />\n \u003CHomeTestimonials />\n \u003CHomeContactCTA />\n \u003C/div>\n \u003C/main>\n\u003C/template>\n```\n\nI’ve created a video demonstrating the issue I'm encountering with Nuxt. The video shows the flashing behavior when navigating between pages, even though I have set up transitions as expected.\n\nhttps://github.com/user-attachments/assets/50acdc47-bb18-4f89-b186-f6f220cd731c\n\nEven though the transition is defined, navigation causes a brief white screen before the new content appears. It seems like the layout or components are unmounted/re-mounted unexpectedly.\n\n## What I’ve tried\n\n- Using static assets (`\u003CNuxtImg>`) with placeholder and blur.\n- Moving layout elements inside Nuxt layouts.\n- Ensuring no SSR hydration errors.\n- Checked for large images or fonts causing flashes.\n- Tried with `nuxt@3.8.1`, but got package warnings on `glob@7.x`.\n\n## Possible cause\n\nIt seems like `\u003CNuxtPage />` renders **before** layout is fully hydrated, or there's a delay with dynamic components (like `useSeoMeta`, runtime config, or `\u003CNuxtImg>`). \nMaybe the `transition` hook isn't synced with the component load.\n\n## Questions\n\n- Is this a known issue with page transitions in Nuxt 3?\n- Should layout or page transitions be handled differently to avoid this kind of visual glitch?\n- Any workaround for a smoother visual transition without flicker?\n\nThanks in advance 🙏\n",[2934,2935],{"name":2922,"color":2923},{"name":2936,"color":2937},"needs reproduction","FBCA04",32053,"💥 Nuxt Page Transition causes a Flash / Blank when navigating — possible layout/rendering issue","2025-05-09T14:47:20Z","https://github.com/nuxt/nuxt/issues/32053",0.6808764,{"description":2944,"labels":2945,"number":2952,"owner":2925,"repository":2925,"state":2953,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Problem\r\n\r\nI've been trying for a few days to generate a fullstatic nuxt build with a 404 page. It seems for me that the most reliable way to do this was only with the fallback site option. My main problem with this fallback option is that the build turns the error page into a complete SPA page (with all client-side store and asyncData requests). \r\n\r\nIn my case the API of the backend is not public accessible and the page need to be load data for the footer and header via a store. All of [these](https://github.com/nuxt/nuxt.js/issues/3776) workarounds not working or send request on client-side.\r\n\r\nWorking with a explicit 404.vue page and not with the error.vue layout brings other problems with the sitemap, statuscodes or urls with i18n. It can be handled, yes, but it shouldnt be such a mess.\r\n\r\n### Possible Solutions\r\n\r\nIt would be a nice feature when the error page has only in fullstatic mode features to prerender it without SPA, a static site only for htacess rules like 'ErrorDocument 404 /404.html'.\r\n\r\nI understand why it has to be a SPA so it could be an other option to create a hybrid with possibilities to inject data in a render proccess (with nuxtServerInit) and SPA mode.\r\n\r\nThank you :-)\r\n",[2946,2949],{"name":2947,"color":2948},"enhancement","8DEF37",{"name":2950,"color":2951},"2.x","d4c5f9",9417,"closed","Static error page (fullstatic or hybrid)","2023-12-17T07:32:02Z","https://github.com/nuxt/nuxt/issues/9417",0.65116733,{"description":2959,"labels":2960,"number":2965,"owner":2925,"repository":2925,"state":2953,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Discussed in https://github.com/nuxt/nuxt/discussions/20158\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **jtlindsey** April 9, 2023\u003C/sup>\r\nI created a `error.vue` in the root of my project based on [migration docs](https://nuxt.com/docs/migration/pages-and-layouts#migration-1) and [reference](https://nuxt.com/docs/getting-started/error-handling#rendering-an-error-page). My custom error page is only being rendered in development. When i run `nuxt generate`, the default 404.html is still being used:\r\n\r\n\r\n```html\r\n\u003C!DOCTYPE html>\r\n\u003Chtml lang=\"en\">\r\n\u003Chead>\r\n\u003Cmeta charset=\"utf-8\">\r\n\u003Ctitle>Error\u003C/title>\r\n\u003C/head>\r\n\u003Cbody>\r\n\u003Cpre>Cannot GET /asdfasdg\u003C/pre>\r\n\u003C/body>\r\n\u003C/html>\r\n```\r\n\r\n\r\nHow do i use a custom 404.html created from `error.vue`? The goal is to use my same layout (header/footer) but use custom body.\u003C/div>",[2961,2964],{"name":2962,"color":2963},"3.x","29bc7f",{"name":2922,"color":2923},20185,"Nuxt3 - custom 404.html not rendered for sites using Static Site Generation","2023-04-16T14:48:47Z","https://github.com/nuxt/nuxt/issues/20185",0.6529049,{"description":2971,"labels":2972,"number":2974,"owner":2925,"repository":2925,"state":2953,"title":2975,"updated_at":2976,"url":2977,"score":2978},"This is similar to #2120 \r\n\r\nI was trying to make a 404 page that I can serve using Nginx. I was able to do that using `./pages/404.vue`. But I found that the router was still serving up `NuxtError` when vue-router 404 errors occurred.\r\n\r\nI [found the following the docs for the errors pages](https://github.com/nuxt/docs/blob/master/en/guide/views.md#error-page) but I was unable to actually get them working.\r\n\r\nI created a layout exactly as it described but still, nothing happened. My original 404 would work fine (`404.html` from `./pages/404.vue`) if I went to something like `missing.html` but would redirect to the default `NuxtError` component for all other router 404s.\r\n\r\nI then read the source and found that there is an undocumented option called `ErrorPage` that is available in `nuxt.config.js`. This property points to a component to use when there is an error or it will fall back to `./components/nuxt-error.vue`.\r\n\r\nI added an entry to my config for `ErrorPage` and pointed it to a new component I made at `./components/ErrorPage.vue`. After that, everything worked perfectly.\r\n\r\nSo I guess my concern is that either the docs are wrong, or there is a bug in nuxt that doesn't serve the `./layouts/errors.vue` properly.\r\n\r\nAnyone else having this issue?\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/c1931\">#c1931\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2973],{"name":2950,"color":2951},2188,"Incorrect documentation or bug with errors.vue?","2023-01-18T15:43:11Z","https://github.com/nuxt/nuxt/issues/2188",0.6548091,{"labels":2980,"number":2983,"owner":2925,"repository":2925,"state":2953,"title":2984,"updated_at":2985,"url":2986,"score":2987},[2981,2982],{"name":2947,"color":2948},{"name":2950,"color":2951},10611,"Static error page for when something goes really, really wrong","2024-06-14T16:02:00Z","https://github.com/nuxt/nuxt/issues/10611",0.6625111,{"description":2989,"labels":2990,"number":2993,"owner":2925,"repository":2925,"state":2953,"title":2994,"updated_at":2995,"url":2996,"score":2997},"### Environment\n\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.7.0`\r\n- Nuxt Version: `3.2.2`\r\n- Nitro Version: `2.2.2`\r\n- Package Manager: `pnpm@7.5.2`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://github.com/Intevel/nuxt-netlify-404\n\n### Describe the bug\n\nA strange bug reported on the Discord, related Post: https://discord.com/channels/473401852243869706/1077514559839010886\r\n\r\nIn the project there is a Dynamic Route, in the Reproduction under `pages/packages/[slug].vue`.\r\n\r\nWith `nuxi generate` the page is not prerendered, in a Netlify deployment this leads to Netlify setting a 404 response status code but rendering the page anyway.\r\n\r\nAt first we thought it was a Netlify problem because the 404 error did not occur locally. And the 404 error was the reported problem.\r\nI tried deploying it to Vercel, and it worked there. With the only difference that Vercel deploys with `nuxt build`, and I think then nitro adds `routeRules` for static routes.\r\n\r\nAlso, no HTML file is created for the dynamic page, and `view-source:` in the browser does not show the direct markup content either, which is definitely bad for SEO.\r\n\r\n/cc @madebyfabian @sharkfin009\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2991,2992],{"name":2962,"color":2963},{"name":2922,"color":2923},19191,"`nuxi generate` doesn't prerender dynamic pages","2023-02-21T11:30:17Z","https://github.com/nuxt/nuxt/issues/19191",0.6705081,{"description":2999,"labels":3000,"number":3007,"owner":2925,"repository":2925,"state":2953,"title":3008,"updated_at":3009,"url":3010,"score":3011},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v22.3.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.8.1\r\n- Builder: -\r\n- User Config: ssr, devtools, runtimeConfig, app, modules, components, generate\r\n- Runtime Modules: @nuxt/image@1.7.0, vuetify-nuxt-module@0.14.1, nuxt-simple-robots@4.0.0-rc.17, @nuxtjs/google-fonts@3.2.0, @vueuse/nuxt@10.11.0\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\n1. create a nuxt 3.12.2 project, with a `pages/about.vue` and some hallo-world content (`\u003Ctemplate>hello world\u003C/template>`)\r\n2. `npm run dev` to verify, there are no errors, navigating to `http://localhost/about`\r\n3. add `export default defineNuxtConfig({ generate: { routes: ['/about', ], }, });` to `nuxt.config.ts`\r\n4. `npm run generate` ... see the error\n\n### Describe the bug\n\nsince 3.12.2, I guess, some links where added to the default 404 and 500 error pages leading to `/`.\n\n### Additional context\n\nIn 3.12.1 it did work fine.\n\n### Logs\n\n```shell-script\nℹ Prerendering 1 initial routes with crawler nitro 03:32:21\r\n ├─ /robots.txt (16ms) nitro 03:32:21\r\n ├─ /200.html (509ms) nitro 03:32:21\r\n ├─ /404.html (510ms) nitro 03:32:21\r\n ├─ / (552ms) nitro 03:32:22\r\n │ └── Error: [404] Page not found: /\r\n ├─ /about (601ms) nitro 03:32:22\r\n\r\n nitro 03:32:37\r\nErrors prerendering:\r\n ├─ / (552ms) nitro 03:32:37 \r\n │ └── Error: [404] Page not found: /\n```\n",[3001,3004],{"name":3002,"color":3003},"workaround available","11376d",{"name":3005,"color":3006},"bug","d73a4a",27694,"since nuxt 3.12.2: regression generating without pages/index.vue: `Error: [404] Page not found: /`","2024-07-01T21:57:44Z","https://github.com/nuxt/nuxt/issues/27694",0.6709363,{"description":3013,"labels":3014,"number":3017,"owner":2925,"repository":2925,"state":2953,"title":3018,"updated_at":3019,"url":3020,"score":3021},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.5.0\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-rcvrkb?file=pages%2F%5B...slug%5D.vue\r\n\r\nThen navigate to any subpage (e.g. `/foobar`).\r\n\r\n(Note that this stackblitz is using the `\"npx serve -s .output/public\"` (including the `-s` flag) to simulate static hosting. The problem does NOT occur without the `-s` flag or using `nuxt preview`.\n\n### Describe the bug\n\nThis is a very weird behaviour. Consider a Nuxt 3 app with the following components:\r\n\r\n`MyHeadline.vue`:\r\n```js\r\n\u003Cscript setup lang=\"ts\">\r\ndefineProps({\r\n text: {\r\n required: true,\r\n type: String,\r\n },\r\n useTagline: {\r\n required: false,\r\n type: Boolean,\r\n default: false,\r\n },\r\n});\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CMyTagline v-if=\"useTagline\" />\r\n {{ text }}\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n`MyTagline.vue`:\r\n```js\r\n\u003Ctemplate>\r\n \u003Cdiv>MyTagline\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n... and a catch-all route with the following `[...slug].vue`:\r\n```js\r\n\u003Cscript lang=\"ts\" setup>\r\nconst route = useRoute();\r\n\r\nconst useTagline = ref(false);\r\nconst headlineText = ref('Homepage');\r\nif (route.path !== '/') {\r\n useTagline.value = true;\r\n headlineText.value = 'Content Page';\r\n}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cmain>\r\n \u003CMyHeadline :text=\"headlineText\" :useTagline=\"useTagline\" />\r\n \u003C/main>\r\n\u003C/template>\r\n\r\n```\r\n\r\nAs expected, generating this site will only prerender the `index.html` of the homepage, with calls to subpages being handled via the catch-all mechanism.\r\n\r\nUsing `nuxt preview` everything seems to work correctly. But when putting it on a static (e.g. `apache`) hosting, or when using the `-s` flag with the `npx serve` command, reveals the following problem:\r\n\r\nAny subpage renders the following content:\r\n```html\r\n\u003Cdiv>\r\n \u003Cdiv>MyTagline\u003C/div>\r\n Homepage\r\n Content Page\r\n\u003C/div>\r\n```\r\n\r\nIt seems that during hydration, the subpage-content is somehow weirdly merged with the prerendered homepage-contents (the `Homepage` title in this case).\r\n\r\nIt seems that the problem does NOT occur for prerendered routes (e.g. crawled routes or routes stated unter `nitro.prerender.routes`). Interestingly it also does not occur, if `\u003CMyTagline v-if=\"useTagline\" />` is switched to come after `{{ text }}` instead of before in `MyHeadline.vue`.\r\n\r\nThis is a very basic example, but in my project with lots of nested components, this results in a complete mish-mash of contents, components and styles.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3015,3016],{"name":2962,"color":2963},{"name":2922,"color":2923},20971,"Generated site with catch-all route weirdly merges page-content with home-content on static hosting","2023-05-24T11:30:36Z","https://github.com/nuxt/nuxt/issues/20971",0.672437,{"description":3023,"labels":3024,"number":3026,"owner":2925,"repository":2925,"state":2953,"title":3027,"updated_at":3028,"url":3029,"score":3030},"I am having trouble with CSS and scripts breaking when refreshing my page, we are utilizing [Buefy UI](https://buefy.github.io/#/) . We are utilizing static generated structure running \"npm run generate\" in order to obtain static generate structure to deploy project as a static project. The project runs successfully and works when it comes to normal routes, when it starts. However, for some reason when I refresh the page the CSS breaks so does the functionality such as search or forms. This seems to be a routing issue as our URL changes when we refreshed and it adds a \"/\". It seems that based on the Nuxt static generate project structure. I am unable to change the routes as Nuxt builds my routes based on my pages folder structure. Does anyone have a solution or has gone through this? \r\n\r\nThe only configuration in our code for nuxt.configuration for the routes is the following below. This route is set up to display our initial page, which is the login page.\r\n ```\r\nrouter: {\r\n extendRoutes(routes, resolve) {\r\n routes.push({\r\n name: 'index',\r\n path: '/',\r\n component: resolve(__dirname, 'pages/login.vue')\r\n })\r\n torch.white(routes)\r\n }\r\n }, ```\r\n\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/c805\">#c805\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3025],{"name":2950,"color":2951},940,"Web application is breaking in functionality due to routing issues in Nuxt Static Generate.","2023-01-18T15:40:36Z","https://github.com/nuxt/nuxt/issues/940",0.6732404,["Reactive",3032],{},["Set"],["ShallowReactive",3035],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpbvj8nyOWv7AvsIxKXqEY8utHrr7klP84-QnMXXZgkI":-1},"/nuxt/nuxt/18718"]