Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setting route.meta.layout causes a flash of the default layout when server rendering

See original GitHub issue

Environment

Operating System: Windows_NT
Node Version: v14.19.0
Nuxt Version: 3.0.0-rc.3
Package Manager: npm@6.14.16
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

Minimal reproduction repo

I tried recreating it in CodeSandbox but had issues with route.meta.layout working at all, it seemed to take no effect, hence the GitHub link above.

The bug can be reproduced in both development and production using the standard commands.

Visiting the /test route will cause a small flash where the default layout is downloaded and rendered on the client before the custom layout takes over.

Describe the bug

I would have expected setting route.meta.layout in <script setup> to have set the correct layout while server side rendering, so there’s no flicker of the default layout as the page loads for the first time.

Instead what happens is the default layout is sent to the browser and rendered, then the custom layout is downloaded and rendered. This causes a flash on screen as the correct layout is downloaded.

Additional context

I cannot use definePageMeta as in my project I must be able to set the layout at run time based on the response from an API call.

I am trying to find a v3 way of solving this issue I raised in 2020 for Nuxt 2: https://github.com/nuxt/nuxt.js/issues/7437

Logs

No response

Issue Analytics

State:
Created a year ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

dan-hammondcommented, Jun 15, 2022

Thank you so much for taking the time to do that, it’s been extremely helpful. I’ve been able to get a proof of concept up and running and connected to our CMS, which is working fantastically.

I do have a few more questions on how to proceed with bits and pieces, such as transitions, but I’ll do as I said and create a discussion for it when I am ready to tackle those parts of the problem.

Thanks again.

0reactions

danielroecommented, Jun 14, 2022

Here’s a super-simple implementation: https://stackblitz.com/edit/github-h74avu. This could be done in lots of different ways, but this might be a helpful starting point…