Nuxt.js で layout を(ページ読み込み後に)動的に変える

やりたいこと

layout(context) {
  return context.app.hogehoge? 'hogehoge': 'default'
}

page コンポーネントで layout を contextに応じて出し分けることはできるが
これが動くのはページ読み込み時のみ。。。

読み込みが終わったあとにレイアウトを変えたい！

やり方

$nuxt.setLayout('layoutName')
// もしくは
$root.setLayout('layoutName')

setLayoutの引数に文字列でレイアウトの名前を渡して実行します

使い方サンプル

自分はbreakpointに応じてレイアウト変えたりするのに使いました↓

watch: {
  // width に応じて xs ~ xl までの文字列が返ってくる
  // watch しやすかったのでこれを使用した
  // watch 対象は width でもなんでも良い
  '$vuetify.breakpoint.name'(breakpoint) {
     // xs の時だけ mobile レイアウトにしたい
     const layoutName = this.$vuetify.breakpoint.xsOnly ? 'mobile': 'default'
     this.$nuxt.setLayout(layoutName)
  }
}

あとがき

やりそうなのに公式ドキュメントのlayout解説してる部分になかったのでシェア

NuxtChildからlayout変えようとしてハマったこともあります
Layout便利！これもできないかな？って思うとハマる部分だと思います・・・