はじめに
こんにちは、がんがんです。
皆さんは新規 Nuxt アプリ開発時に Nuxt Starter Templates を利用していますか？
Nuxt Starter Templates はnuxi initコマンドで利用する-t, --templateオプションで利用できるテンプレートです。例えば、下記は Nuxt UI のテンプレートを利用した例です。
npx nuxi init -t ui
Nuxt Starter Templates を使いこなすことで新規 Nuxt アプリが簡単に作成することが出来ます。では、実際にどんなテンプレートがあるのでしょうか？
本記事では利用ケースを考えながらテンプレートを見ていきます。
リポジトリ・ドキュメント
Nuxt Starters をまとめた公式サイトがあります。
本サイトと合わせて下記リポジトリを覗くことで色々とテンプレートが知れそうです。
利用ケースで考えてみる
1. 新規 Nuxt アプリを作成したい
まずは一番シンプルな例です。この場合のコマンドは以下の通りです。
npx nuxi init {project_name}
このコマンドで作成されるのはミニマムなものです。app.vue があるだけのシンプルな構成になっています。
2. Nuxt Content を始めたい
Nuxt Content を始めたい場合は以下のコマンドで作成します。
npx nuxi init -t content {project_name}
テンプレート内容を見ると、ミニマムテンプレートと追加でcontent/とpages/が追加されていますね。
3. Nuxt UI を始めたい
UI ライブラリとしてNuxt UIを利用したい場合、新規 Nuxt アプリ作成 ⇨ Nuxt UI をインストールと 2STEP 踏む必要があります。地味にめんどいですよね。
そんな方のために Nuxt UI 用のテンプレートも用意されています。
npx nuxi init -t ui {project_name}
3.2 Nuxt UI Pro の場合はどうなるの？
先ほどのものは Nuxt UI スターターでした。では、Nuxt UI Pro 利用ユーザーはどうすれば良いのでしょうか。
Nuxt UI のドキュメントを確認すると Nuxt UI Pro ユーザー向けのページが存在しています。
コマンドとしては以下のようになります。
npx nuxi init -t github:nuxt-ui-pro/dashboard {project_name}
現在テンプレートは 4 つあるので、全部まとめると以下のようになりますね。
npx nuxi init -t github:nuxt-ui-pro/{dashboard,docs,landing,saas} {project_name}
4. NuxtHub もテンプレートは存在しているのか？
Nuxt と Cloudflare の連携をスムーズにしてくれる NuxtHub という公式モジュールがあります。こちらにもテンプレートがあるのでしょうか？
はい、こちらも公式テンプレートが用意されています。NuxtHub のテンプレートは NuxtHub Organization 直下に用意されています。
npx nuxi init -t hub {project_name}
オレオレテンプレートを作ることは可能なのか？
ここまでお読みになった方は疑問になったはずです。
「プロダクトや自分用のオレオレテンプレートの作成は可能か？」
どのテンプレートを見てみてもミニマムであるが故に Linter や Testing などの設定が標準で追加されていません。
しかし、プロダクトや個人で使い回す場合はそれぞれの設定まで含んでいる方が嬉しいです。
A. オレオレテンプレート、作成可能です。
オレオレテンプレート、作成可能です 🙆♂️
実際にテンプレートが利用している設定ファイルを覗いてみましょう。
対象名や URL、tar を設定しているだけであり、本設定のみでテンプレートの利用が実現可能です。
Nuxt CLI はどのように実現しているのか？
Nuxt CLI の init コマンドを除いてみるとunjs/gigetで実現していました。
前項で見たオプションは downloadTemplate() の設定オプションです。
そのため、json で設定した値を読み込み Nuxt CLI 内で展開することで実現しています。
このオプションを見る限りだと GitHub / GitLab などでも実現できそうですね。プロバイダーが多いのはありがたいです。
おわりに
今回は Nuxt Starter Templates について調査を行いました。
GitHub を用いている場合は GitHub Repository Templateという選択肢がありますが、
ライブラリの更新周りで地味に面倒くさいケースもあります。
そのため、
- Repository Templates を利用するケース
- Nuxt Starter Templates を利用するケース
- オレオレ create-nuxt-app CLI を UnJS で自作する
などなど、ご自身とプロダクトに合ったものを選んで頂けると良いのかなと思います。
本記事が「Nuxt3 にも Nuxt2 時代の create-nuxt-app 相当のものがあるんだ！」と知ってもらい、テンプレートを調べる際の索引となれば幸いです。
Discussion