Calling setPageLayout() before page mount does not render properly

[loilo]

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

[danielroe]

You need to call setPageLayout either (on server) before the layout starts rendering (such as in a plugin) or (on client) after the app has mounted. I would welcome a PR to the docs to make this clear.

[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]

Also a good idea. 👍

[loilo]

So just to clarify this: It should work when calling setPageLayout() in setup during SSR and in a mounted hook during CSR?

I adjusted the repro to this premise, but it still doesn't seem to work as I'd expect: https://stackblitz.com/edit/github-t7y38h-murv6p?file=pages%2Findex.vue

[danielroe]

No, it should not work calling in setup during SSR. On server, it only works before the layout starts to be rendered, so in a plugin.

[loilo]

Okay, not aware of what exactly this means yet, need to do some reading about server-side plugin magic I guess. Thanks for clarifying!

[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.

[deeluxe74]

In conclusion, we nerver can't do this (in nuxt default ssr mode)?
https://nuxt.com/docs/guide/directory-structure/layouts#changing-the-layout-dynamically