Different layouts for different pages

[PeterQF]

Hi guys,

In Nuxt i could specify layout in vue page. This is my splitted routes for posts:

export default [
  {
    path: '/posts',
    component: () => import('layouts/Default.vue'),
    meta: {
      requiresAuth: true
    },
    children: [
      {
        path: '/posts',
        name: 'posts-index',
        component: () => import('pages/posts/index.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/posts/create',
        name: 'posts-create',
        component: () => import('pages/posts/create.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/posts/show',
        name: 'posts-show',
        component: () => import('pages/posts/show.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/posts/edit',
        name: 'posts-edit',
        component: () => import('pages/posts/edit.vue'),
        meta: {
          requiresAuth: true
        }
      }
    ]
  }
]

all these pages uses default layout with left drawer, clickable logo and what not.

I would like to have the default layout on index page for posts but on pages show, create and edit i would like a different layout.

Is this possible somehow?

[metalsadman]

Yes, create another parent route with a different layout, child routes will use its layout.

[PeterQF]

thank you @metalsadman

could you please point me in right direction code wise?

[metalsadman]

There was a guide here in the forums about it, try using search, also plenty out there in google youtube etcc. Basic guide in official vue docs too. Got few in my example sandbox https://codesandbox.io/s/0ybb3 src/components.

[PeterQF]

thank you so much @metalsadman . You are a Quasar-blackbelt

This worked for me does it look okay to you?

export default [
  {
    path: '/posts',
    component: () => import('layouts/Default.vue'),
    meta: {
      requiresAuth: true
    },
    children: [
      {
        path: '',
        name: 'posts-index',
        component: () => import('pages/posts/index.vue'),
        meta: {
          requiresAuth: true
        }
      }
    ]
  },
  {
    path: '/posts',
    component: () => import('layouts/DefaultEdit.vue'),
    meta: {
      requiresAuth: true
    },
    children: [
      {
        path: '/posts/create',
        name: 'posts-create',
        component: () => import('pages/posts/create.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/posts/show',
        name: 'posts-show',
        component: () => import('pages/posts/show.vue'),
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/posts/edit',
        name: 'posts-edit',
        component: () => import('pages/posts/edit.vue'),
        meta: {
          requiresAuth: true
        }
      }
    ]
  }
]

[metalsadman]

@PeterQF np, yeah thats good.