DEV Community

Mattia Zanella
Mattia Zanella

Posted on • Updated on

Nuxt.js - Dynamic layouts by current route.

UPDATE 07/2020

I've updated the snippets below since in specific edge-cases when refreshing the page the middleware didn't work.

Given Nuxt documentation it seems like that it is not so easy for us to have different layouts by dynamic routes.

So I surfed the web and I've found a similar issue and, by the end of the day, this is my solution.

This is my structure:

pages/
   _page.vue
   index.vue
Enter fullscreen mode Exit fullscreen mode

The solution, already mentioned in the issue, is to create a middleware under middleware folder like this one:

/** 
 * @description myMiddleware.js
 * @see https://glitch.com/edit/#!/nuxt-dynamic-layouts?path=middleware/mobile.js:5:1
 */
export default context => {
  const { route: { params } } = context

  switch (params.page) {
    case 'tmp1':
    case 'tmp2':
        return 'tmpLayout'

      default:
        return 'default'
  }
}
Enter fullscreen mode Exit fullscreen mode

And inside _page.vue simply use this line:

  import myMiddleware from '@/middleware/myMiddleware'
  ...
  layout: myMiddleware,
Enter fullscreen mode Exit fullscreen mode

So whenever you navigate through mysite.com/tmp1 or mysite.com/tmp2 our tmpLayout will always used.

UPDATE 07/2020

I've updated the snippets above since in specific edge-cases when refreshing the page the middleware didn't work.

Top comments (0)