Nuxt Layers の使い方
はじめに
この記事は Nuxt / UnJS - Qiita Advent Calendar 2024 - Qiita の19日目の記事です。
@takasqr です。私は普段 Web のフロントエンドは、Nuxt を使ってサービスを開発しています。先日、Nuxt Layers を使う機会があったので、記事を書くことにしました。
ちなみに初 Zenn 記事です。普段はブログに記事を書いています。
Nuxt Layers とは？
Nuxt Layers は、Nuxt3 で提供される機能の1つです。プロジェクトの設定やコードを再利用可能な単位に分割し、複数のプロジェクト間で共有することができます。
Nuxt Layers を使用すると、アプリケーションの機能やデザイン、設定を簡単に別プロジェクトに切り出すことが可能になります。モジュラモノリス構成などで使えるようにデザインされているみたいです。
私は Web アプリやブログを一つにした、自分の名刺代わりになるようなサイトを運営しています。その中でブログ部分を Nuxt Layers で別リポジトリに切り出して、ソースコードを公開しています。
Web アプリの部分はある程度アクセスもある(数万PV)ので公開したくないけど、ブログ部分は技術力のアピールになるかなと思い、この構成にしています。
この記事では Nuxt Layers の使い方をサラッと触れた後に、実際に開発するときに押さえておきたいポイントを紹介します。
以下、Nuxt v3.14 時点での話になります。今後変更されるかもしれません。
運営しているサイト
Nuxt Layers で切り出したブログのソースコード
Nuxt Layers を使ってみる
まず、Nuxt Layers の基本設定を紹介します。
1. 子プロジェクトを作る
npx nuxi init --template layer nuxt-layer
2. Nuxt Layers を親プロジェクトに設定する
親プロジェクトに子プロジェクトを設定します。nuxt.config.tsにて設定します。
以下はローカル上に子プロジェクトを作った時のnuxt.config.tsです。
nuxt.config.ts
export default defineNuxtConfig({
extends: [
'../nuxt-layer'
]
})
他にも GitHub のリポジトリを指定できたりします。
こうやって Layer に切り出すことで、開発時は切り出した子プロジェクトで開発することができます。そして、ビルド時にルードプロジェクトが子プロジェクトをまとめてビルドしてくれます。便利です。
以下、実際に開発するときに押さえておきたいポイントを紹介します。
【ポイント1】 連携されるディレクトリ
ます、Nuxt Layers で拡張される項目です。
Nuxt Layers で拡張される項目
- components
- composables
- layouts
- pages
- plugins
- server
- utils
- nuxt.config.ts
- app.config.ts
Authoring Nuxt Layers · Nuxt Advanced
次に Nuxt Layers で拡張されない項目です。
Nuxt Layers で拡張されない項目
- assets
- content
- middleware
- modules
- public
- .env
- .gitignore
- .nuxtignore
- app.vue
- app.config.ts
- error.vue
- package.json
- tsconfig.json
これらのディレクトリは Nuxt Layers で拡張されません。なので、手動で同期するか自前で親プロジェクトに持って来る仕組みが必要です。
また、子プロジェクトでの開発で使う、.playgroundディレクトリにもコピーされないので注意が必要です。
Nuxt 公式以外のディレクトリやファイルも同期されないので意識しておく必要があります。例えば、tailwind のコンフィグファイルなども親プロジェクトに移動されないです。
【ポイント2】 実行時のディレクトリの場所
開発を進めていく中で、子プロジェクトをちゃんと参照できているか確認したい時があると思います。
そんな時はnode_modules/.c12を確認するといいです。node_modules/.c12の中に子プロジェクトの.vueファイルなどが作られています。
さいごに
Nuxt Layers 便利なのでぜひ使ってみてください。
Discussion