More than 5 years have passed since last update.

Nuxt クエリパラメータによってlayoutを切り替える

Last updated at 2019-11-08Posted at 2019-11-07

クエリパラメータによって使用するlayoutファイルを切り替えなければならない場面に遭遇したので備忘録。
公式ドキュメントにある通りです。

layoutの使い方

ページコンポーネントでlayoutプロパティを指定することでカスタムレイアウトが使用できます。
指定がない場合はdefaultのlayoutファイルが使われます。

// 公式より
export default {
  layout: 'blog',
  // または
  layout (context) {
    return 'blog'
  }
}

layoutメソッドの引数にコンテキストを渡すことができます。
localhost:3000/hoge?type=specialにリクエストがきた時にspecialレイアウトを使用する場合

hoge/index.vue

export default {
  layout({ query }) {
     if (query.type === 'special') {
        return 'special'
     }
     return 'default'
   }
}