Nuxt3のLayersを使ってみた

はじめに

• Nuxt3のLayers機能を使用したサンプルを実装してみたいと思います。

対象読者

• Nuxt3のLayers機能に興味のある方
• Nuxt3のリポジトリ内のファイルが多くなりすぎて困っている方
• Nuxt3でモジュラーモノリス化してみたい方

Layersとは

https://nuxt.com/docs/getting-started/layers

• components/pages/utilsなどを再利用しやすくする仕組みです。
• Layerの参照方法は相対パス・NPMパッケージ・他のGitリポジトリから取得など色んな方法を選べます。

構成イメージ

今回作成するものの構成イメージは以下の通りです。

• layer-lib：components/utilsなどを管理するLayer
• layer1：/layer1のページを提供するLayer。layer-libのコンポーネントを使用
• layer2：/layer2のページを提供するLayer
• nuxt-app：/layer1と/layer2を実行するNuxtアプリ

動作環境

今回の動作環境は以下の通りです。

• Node.js - 20.x
• Yarn - 1.22.x

使用ライブラリ

今回の使用ライブラリは以下の通りです。

• nuxt -3.6.x

実装イメージ

LayerのTemplateから変更したものを抜粋して記載します。全てのソースコードを確認したい方はソースコード一式を確認ください。

layer-lib

components/CustomLabel.vue

<template>
  <div style="background-color: aqua;">CustomLabel</div>
</template>

layer1

nuxt.config.ts

export default defineNuxtConfig({
  // layer-libをextends指定して読み込む
  extends: ['../layer-lib']
})

pages/layer1.vue

<template>
  <ul>
    <li>Nuxt Layer Sample - layer1</li>
     <!-- layer-libから読み込んだCustomLabelを配置 -->
    <li><CustomLabel /></li>
    <li><NuxtLink to="/">Top</NuxtLink></li>
    <li><NuxtLink to="/layer2">/layer2</NuxtLink></li>
  </ul>
</template>

layer2

nuxt.config.ts

export default defineNuxtConfig({
  // 指定なし
})

pages/layer2.vue

<template>
  <ul>
    <li>Nuxt Layer Sample - layer2</li>
    <li><NuxtLink to="/">Top</NuxtLink></li>
    <li><NuxtLink to="/layer1">/layer1</NuxtLink></li>
  </ul>
</template>

nuxt-app

nuxt.config.ts

export default defineNuxtConfig({
  // layer1, layer2を読み込む
  extends: ['../layer1', '../layer2']
})

app.vue

<template>
  <NuxtPage />
</template>

pages/index.vue

<template>
  <ul>
    <li>Nuxt Layer Sample - index</li>
    <li><NuxtLink to="/layer1">/layer1</NuxtLink></li>
    <li><NuxtLink to="/layer2">/layer2</NuxtLink></li>
  </ul>
</template>

動作確認

nuxt-app全体

# nuxt-appにディレクトリ移動
cd nuxt-app

# パッケージインストール
yarn

# nuxt-app実行
yarn dev

layer1単体

# layer1にディレクトリ移動
cd layer1

# パッケージインストール
yarn

# layer1のみ実行
yarn dev

※layer2とnuxt-appを読み込んでいないため、/layer1のみアクセスできる

layer2単体

# layer2にディレクトリ移動
cd layer2

# パッケージインストール
yarn

# layer2のみ実行
yarn dev

※layer1とnuxt-appを読み込んでいないため、/layer2のみアクセスできる

ソースコード一式

https://github.com/yasu-s/nuxt-layer-sample/tree/demo

おわりに

• モノリス -> モジュラーモノリス化の流れが見えてきました。
• Layer単体での実行も簡単なため、開発作業がはかどります。
• モジュラーモノリス -> マイクロフロントエンド(垂直分割方式)化もサポートされるといいなと思いました。
• npm/yarnのワークスペース機能を使うとパッケージ管理や実行が楽になりますのでおすすめです。