Calling setPageLayout() before page mount does not render properly

Environment

Output of npx nuxi info from the provided StackBlitz (although I have also locally tested this with a recent edge release).

RootDir: /home/projects/github-t7y38h Nuxt project info:

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.11
• Nitro Version: 0.5.4
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

See this Stackblitz: https://stackblitz.com/edit/github-t7y38h?file=pages/index.vue

Describe the bug

Calling setPageLayout() directly during the page component’s setup (i.e. before the page has been mounted) will change most of the layout’s template correctly, but will not apply root classes correctly.

EDIT: As I noticed after creating the reproduction project above, the problematic behavior is not strictly limited to the root element. The problem persists even when wrapping the layout’s root element in another <div> layer, so here’s an alternative Stackblitz with the adjusted template structure: https://stackblitz.com/edit/github-t7y38h-cueidk?file=pages/index.vue

Additional context

The reason for using setPageLayout() over definePageMeta() in my case is that I’m getting the page’s layout from a third party endpoint with useAsyncData(). However, doing that is not necessary to reproduce the behavior.

Logs

No response

[loilo]

I can take care of this. That said, if this is easily detectable, it might be useful for this function to console.warn something when used inappropriately.

[danielroe]

The issue is that server renders top down, outside in, and is not reactive. So if you change the layout (which has already been rendered) in a child component, this will lead to wrong HTML. The layout can’t be rerendered to HTML; that ship has sailed.