N
N
Nikita Pavlyuk2021-02-11 11:05:55
Vue.js
Nikita Pavlyuk, 2021-02-11 11:05:55

How to "disable" the behavior of the layouts folder in nuxt in order to prescribe layout in router.js?

In the project I use the @nuxt/router package/module ( https://github.com/nuxt-community/router-module#readme ). It allows you to use router.js like you would in a regular vue app. However, I cannot set the layout of the component in the router.

In the layouts folder, I create the auth.vue component. In the pages folder, I create the login and register components.
The expected result (the code is for an example and not from the project):

const router = new VueRouter({
  routes: [
    { 
      path: '/auth', component: Auth,
      children: [
       { path: 'login', component: AuthLogin },
       { path: 'register', component: AuthRegister }
      ]
    }
  ]
})


As a result, it turns out that the /auth/login or /auth/register paths will be wrapped in the default layout.

From the documentation ( https://nuxtjs.org/docs/2.x/directory-structure/la... )
Every file (top-level) in the layouts directory will create a custom layout accessible with the layout property in the page components.


export default {
  layout: 'auth',
  // OR
  layout (context) {
    return 'auth'
  }
}


Total:
- I don't want to specify layout in components.
- I want to specify the layout in router.js
+ somehow disable this default "behavior" of nuxt

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question