Nuxt.js nuxt-childを利用して共通ヘッダーを作成する

Nuxt.js nuxt-childを利用して共通ヘッダーを作成する

nuxt-childコンポーネントを利用すると簡単に共通化が可能です。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2
  • @nuxtjs/vuetify 1.9.0

Nuxt.jsは「 npx create-nuxt-app 」コマンドでインストールしてます。

vuetifyも「 npm install @nuxtjs/vuetify 」でインストール済みです。

nuxt-childサンプル

nuxt-childを利用して共通ヘッダーを作成します。

まずは、pagesディレクトリ配下にcommon.vueファイルとcommonディレクトリを作成し、commonディレクトリ内にpage1.vue,page2.vueを作成します。

ディレクトリ構成は下記となります。

ファイルを作成するとnuxtの自動ルーティング機能により、.nuxtディレクトリ配下のrouter.jsに下記の記述が追加されます。

次に共通ヘッダーとなるcommon.vueに下記のコードを記述し、ヘッダー部を作成します。 vuetify のコンポーネントを利用してるので、コードが長くて見にくくなってますが nuxt-childはソースの下の方に記述してます。

次にcommonディレクトリ配下のpage1.vueに下記のコードを記述します。

page2.vueも記述します。

動作確認

起動する

ブラウザから http://プライベートIP:3000/common/page1 にアクセスするとcommon.vueのソースがpage1.vueにも適応されていることが確認できます。

※nuxt.js 外部IPから接続できるようにする設定はこちら

同様に http://プライベートIP:3000/common/page2 にアクセスすると、こちらもcommon.vueのソースがpage2.vueにも適応されていることがわかります。

page1.vue,page2.vueに記述されたコードがcommon.vue内のnuxt-childタグが記述された箇所に、表示されていることが確認できます。

試しにnuxt-childタグを下記の場所に追加すると、

http://プライベートIP:3000/common/page2 にアクセスすると、 page2.vueのコードが文字列「共通ヘッダー」の後ろに表示されます。