Change default layout programmatically

russellsean
0
russellsean
commented 4 months ago

What problem does this feature solve?

Role-based applications could load different layouts based on the user's role. Currently, I am utilizing the layout property in every component like:

  layout(context) {
    return context.store.state.auth.user.role
  } 

my layout folder is structured like:
layout/

  • admin.vue
  • default.vue
  • manager.vue
  • norole.vue
  • user.vue

Which works great until I create a new component and forget to throw this snippet in.

What does the proposed changes look like?

I am wondering if having a global method to set the default layout would be a useful feature. In the scenario of programmatically changing the layout based on a user's role, I would image it would be called like:

this.$layout.setDefault(this.$auth.user.role + '.vue'); // admin role -> admin.vue
// or maybe even bind it?!
this.$layout = this.$auth.user.role + '.vue';

Maybe I am overthinking this. Thanks!

idea
0
Timkor
6
Timkor
commented 4 months ago

I think that's already possible:

$nuxt.setLayout('admin')

You could just watch the store.state.auth.user.role and change layout.

0
russellsean
0
russellsean
commented 4 months ago

Thank you! Do you know of any way I can access this.$nuxt from within vuex?

0
manniL
5.1k
manniL
commented 4 months ago

@russellsean on client-side: window.$nuxt.

0
manniL
5.1k
manniL
commented 4 months ago

PS: Closing here as the requested feature is already included.

0
russellsean
0
russellsean
commented 4 months ago

I noticed this only changes for the current component. If you route to another page it changes back to the default layout. Is there any way to change the default layout for the entire app?

0
altryne
0
altryne
commented 2 months ago

Jumping in here, is there a way to use setLayout from inside asyncData?
All I found is accessing context.app.methods.setLayout but it doesn't change the actual layout of the printed page.

0
Informations
Feature Request โ€ข Open
#c8764 - Created 4 months ago