Nuxt 2 でのレイアウト(`layouts`)に記述するべきロジック

Published: 2022/3/26


Nuxt.js では layouts ディレクトリがあり、ここに、いわゆる共通系のレイアウトを記述することができるが、よくよく考えると、これは <slot> を用いることで、通常のコンポーネントでも再現が可能。

さらに、この layout の vue コンポーネントには、以下の特性がある。

  1. asyncData の結果を、素直に利用するためには、 vuex のストアを経由しなければならない。
  2. webpack のビルドにて、 SPA としての client.js に bundle される。なので、ほうっておくと、 layouts が増えれば増えるほどすべてのページが重くなっていく。(一応、 build.splitChunks.layouts を true に、 nuxt.config.js で設定することで、分離することは可能)

これらの特性を考えると、 layouts の利用方針は以下のうちのどちらかになるはず。

  • パターン1: すべてのページに共通で利用する機能だけを詰め込んで、 layouts/default.vue のみを利用する
  • パターン2: 普通にレイアウトごとに分割していく。そして、 build.splitChunks.layoutstrue に設定しておく。

Tags: nuxt

About

エンジニアです。 仕事では Xincere Residence を作っています。 このサイトは個人のブログであり、所属団体の意見等とは関係がありません。

Tags