Nuxt.js: Define layout dynamically

[wienska]

Hi! Is there a way to define layout dynamically by variable or with a ternary expression? I need to change the layout if mobile device is detected.

_{This feature request is available on Nuxt.js community (#c230)}

[Atinux]

Hi @Ca4tkin

Could you provide an example of how you would like to set a dynamic layout?

[wienska]

Something like this:
layout: this.$store.state.isMobile ? 'mobile' : 'default'

[awronski]

I am looking for the same solution.

Could you change layout property to a function that receive context, eg:

layout: (context) => context.isMobile ? 'mobile' : 'desktop'

[o-alexandrov]

+1 for the dynamic layout switching

[Atinux]

+1

I will implement it for the next release.

[awronski]

Hi Guys!

Can we go further? Is it technically possible to add context to the layouts?

Because of no context now all the conditions needs to be put in the pages.
This causes code duplication in the pages and the layouts are only sufficient for very simple cases.

For example what I would like to do:

• switching components depends on the user-agent, user location, language, headers etc
• switching components depends on the application state
• switching components depends on the external environments variables
• switching themes (css) depends on the requested domains (domain.com, domain.fr, domain.de ...)
• and so on.

Now all the code I moved to the pages and I don't use layouts at all :(

@alexchopin What do you think about it?

[Atinux]

@awronski you can add all of these variables (location, user-agent, etc.) in the nuxtServerInit directly in your global state via the store.

Then, you can access $store everywhere in your layouts, pages and components.

The actual difficulty of setting a layout dynamically was the fact that a layout also have middleware attached to it, but I think I found a way of doing it.

[awronski]

@Atinux
Thanks, it works. I wrote an example. Maybe it will help someone else:

https://github.com/awronski/nuxtjs-examples/tree/master/mobile-desktop-with-store

[Atinux]

Small overview 😄

[Atinux]

The 0.10 release it out ✋

[ausir0726]

@kodekrendel
defined layout function at your vue file in pages folder

// index.vue
export default {
  layout () {
    return checkSomethingYouWant ? 'layout_a' : 'layout_b' ;
  }
}

https://nuxtjs.org/api/pages-layout/#the-layout-property

[Atinux]

@kodekrendel see https://github.com/nuxt/nuxt.js/tree/master/examples/dynamic-layouts

[Atinux]

You should check this line: https://github.com/nuxt/nuxt.js/blob/master/examples/dynamic-layouts/pages/index.vue#L10

[Atinux]

Yes, there is 2 examples: custom-layouts and dynamic-layouts, the live example and the documentation example use only custom-layouts.

[Atinux]

See the live examples:

• Custom layouts: https://glitch.com/edit/#!/nuxt-custom-layouts (demo)
• Dynamic layouts: https://glitch.com/edit/#!/nuxt-dynamic-layouts (demo)

[ausir0726]

@kodekrendel

that because 0.10.0 have breaking change ,
aboult.vue should change data() to asyncData()
data function has no context anymore .

[Atinux]

Fixed @kodekrendel @ausir0726

[Atinux]

You can $watch the route and update the CSS classes applied, you don't need to use custom layouts for this @kodekrendel

I recommend you to carefully read the Vue.js and Vue-router documentation :)

[sudhir600]

Hi, is there any possibility to set the layout in middleware based on the route.
my some or pages will be always /admin/anything and some are domain.com/page
so for /admin/anything I want to use a different layout. this is currently possible by adding layout in each page but I want to set it once in middleware and it should be accessed automatically.

[MariusRossouw]

I have 4 or more different layouts. How would I set the layout dynamically to any one of the four based on a single variable ? The above allows for 2 layouts and I am struggling to implement it for more layouts. Any help would be greatly appreciated

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.