nuxt.js - How to better extend layout with conditional component in Nuxt?

Question

Currently, I am having 3 layouts:

1. has header and sidebar
2. has header no sidebar
3. has no header nor sidebar

What is the way to extend the layout with options whether to turn on or off the sidebar and header? These are 3 possibilities but I'm sure there should be better way

1. Use 1 layout with vuex state. Set the showHeader and showSidebar beforeMount
2. Use 1 layout with $route condition to show header and sidebar
3. Use 3 layouts

Does anyone know any better way?

question from:https://stackoverflow.com/questions/65882458/how-to-better-extend-layout-with-conditional-component-in-nuxt

Answer 1

If displaying header statically, i would prefer to separate 2 layout.

1. has header
2. has no header

And control the sidebar open/close state from vuex by user prefer.

If header preference is dynamically,

one default layout and control header and sidebar open/close state from vuex