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

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'
  }
}

And inside _page.vue simply use this line:

  import myMiddleware from '@/middleware/myMiddleware'
  ...
  layout: myMiddleware,

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.