🪧
Nuxt3のLayersを使ってみた
はじめに
- Nuxt3のLayers機能を使用したサンプルを実装してみたいと思います。
対象読者
- Nuxt3のLayers機能に興味のある方
- Nuxt3のリポジトリ内のファイルが多くなりすぎて困っている方
- Nuxt3でモジュラーモノリス化してみたい方
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-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のみアクセスできる
ソースコード一式
おわりに
- モノリス -> モジュラーモノリス化の流れが見えてきました。
- Layer単体での実行も簡単なため、開発作業がはかどります。
- モジュラーモノリス -> マイクロフロントエンド(垂直分割方式)化もサポートされるといいなと思いました。
- npm/yarnのワークスペース機能を使うとパッケージ管理や実行が楽になりますのでおすすめです。
Discussion