Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change default layout programmatically #14658

Closed
2 of 4 tasks
ILLuMiNaTe7 opened this issue Aug 21, 2022 · 7 comments
Closed
2 of 4 tasks

Change default layout programmatically #14658

ILLuMiNaTe7 opened this issue Aug 21, 2022 · 7 comments

Comments

@ILLuMiNaTe7
Copy link

ILLuMiNaTe7 commented Aug 21, 2022

Describe the feature

In Nuxt 2 there is a very nice method called $nuxt.setLayout('layout2'). Sadly in Nuxt 3, this functionality is nowhere to be found.

The following method works but you cannot access any variables in this function. So you won't be able to set it dynamically.

<script setup>
definePageMeta({
  layout: 'layout2',
});
</script>

And this option won't be executed on SSR but only when the page is loaded. The page source won't show anything about the layout.

<script setup>
const route = useRoute()
route.meta.layout = "layout2"

definePageMeta({
  layout: false,
});
</script>

So I'm going to assume this functionality isn't in the build yet or it isn't in the documentation.

Additional information

  • Would you be willing to help implement this feature?
  • Could this feature be implemented as a module?

Final checks

@HomWang
Copy link
Contributor

HomWang commented Aug 22, 2022

Great idea, I'll submit a function of this later to help with changes

@HomWang
Copy link
Contributor

HomWang commented Aug 22, 2022

nuxt/framework#6826

@danielroe
Copy link
Member

If you want the layout updated on SSR, you will need to change it before the layout starts rendering, which means it needs to be changed within a plugin or a middleware rather than within a page. (By the time a page renders on server, the layout has already been rendered 'around' it, so it's too late to change it.)

On client, things are reactive so you don't need to worry so much about order.

It might be worth adding a very brief note about this to the documentation, though we do document that setting route.meta.layout is the way to update the layout dynamically: https://v3.nuxtjs.org/guide/directory-structure/layouts/#changing-the-layout-dynamically.

@ILLuMiNaTe7
Copy link
Author

ILLuMiNaTe7 commented Aug 22, 2022

If you want the layout updated on SSR, you will need to change it before the layout starts rendering, which means it needs to be changed within a plugin or a middleware rather than within a page. (By the time a page renders on server, the layout has already been rendered 'around' it, so it's too late to change it.)

I've tried setting the route.meta.layout inside a plugin sadly this did not work as it becomes undefined once the page starts loading resulting in a page without a layout.

export default defineNuxtPlugin(async (nuxtApp) => {
    ...
    const route = useRoute()
    console.log(route.meta.layout)
    route.meta.layout = core.webshop.layout
    ...

@danielroe
Copy link
Member

Yes, sorry for the misleading tip. Middleware is where you'd want to be if you're doing it on server.

And note that you will have to ensure that you are setting layout on client too to ensure the page hydrates. You could use useState for that purpose.

See https://stackblitz.com/edit/github-jcup64 for an example.

@ILLuMiNaTe7
Copy link
Author

Yes, sorry for the misleading tip. Middleware is where you'd want to be if you're doing it on server.

And note that you will have to ensure that you are setting layout on client too to ensure the page hydrates. You could use useState for that purpose.

See https://stackblitz.com/edit/github-jcup64 for an example.

This indeed works! Thanks a lot for clearing up the confusion and for providing a solution.

@danielroe
Copy link
Member

This is now added to docs (and setPageLayout utility also added): nuxt/framework#7075.

@danielroe danielroe added the 3.x label Jan 19, 2023
@danielroe danielroe transferred this issue from nuxt/framework Jan 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants