Nuxt Starter Templatesってどんな種類があるの？

はじめに

こんにちは、がんがんです。
皆さんは新規 Nuxt アプリ開発時に Nuxt Starter Templates を利用していますか？

Nuxt Starter Templates はnuxi initコマンドで利用する-t, --templateオプションで利用できるテンプレートです。例えば、下記は Nuxt UI のテンプレートを利用した例です。

terminal

npx nuxi init -t ui

Nuxt Starter Templates を使いこなすことで新規 Nuxt アプリが簡単に作成することが出来ます。では、実際にどんなテンプレートがあるのでしょうか？

本記事では利用ケースを考えながらテンプレートを見ていきます。

リポジトリ・ドキュメント

Nuxt Starters をまとめた公式サイトがあります。

https://nuxt.new/

本サイトと合わせて下記リポジトリを覗くことで色々とテンプレートが知れそうです。

https://github.com/nuxt/starter

利用ケースで考えてみる

1. 新規 Nuxt アプリを作成したい

まずは一番シンプルな例です。この場合のコマンドは以下の通りです。

terminal

npx nuxi init {project_name}

このコマンドで作成されるのはミニマムなものです。app.vue があるだけのシンプルな構成になっています。

https://github.com/nuxt/starter/tree/v3

本テンプレートを利用した場合に生成されるのは Nuxt3 アプリです。
そのため、Nuxt4 の機能は何も使えません。もし実験的に Nuxt4 を利用したい・Nuxt4 のディレクトリ構成で生成したい場合は v4-compat テンプレートをご利用ください。

https://github.com/nuxt/starter/tree/v4-compat

terminal

npx nuxi init -t v4-compat {project_name}

2. Nuxt Content を始めたい

Nuxt Content を始めたい場合は以下のコマンドで作成します。

terminal

npx nuxi init -t content {project_name}

テンプレート内容を見ると、ミニマムテンプレートと追加でcontent/とpages/が追加されていますね。

https://github.com/nuxt/starter/tree/content

3. Nuxt UI を始めたい

UI ライブラリとしてNuxt UIを利用したい場合、新規 Nuxt アプリ作成 ⇨ Nuxt UI をインストールと 2STEP 踏む必要があります。地味にめんどいですよね。

そんな方のために Nuxt UI 用のテンプレートも用意されています。

terminal

npx nuxi init -t ui {project_name}

https://github.com/nuxt/starter/tree/ui

3.2 Nuxt UI Pro の場合はどうなるの？

先ほどのものは Nuxt UI スターターでした。では、Nuxt UI Pro 利用ユーザーはどうすれば良いのでしょうか。
Nuxt UI のドキュメントを確認すると Nuxt UI Pro ユーザー向けのページが存在しています。

https://ui.nuxt.com/pro/getting-started

コマンドとしては以下のようになります。

terminal

npx nuxi init -t github:nuxt-ui-pro/dashboard {project_name}

現在テンプレートは 4 つあるので、全部まとめると以下のようになりますね。

terminal

npx nuxi init -t github:nuxt-ui-pro/{dashboard,docs,landing,saas} {project_name}

4. NuxtHub もテンプレートは存在しているのか？

Nuxt と Cloudflare の連携をスムーズにしてくれる NuxtHub という公式モジュールがあります。こちらにもテンプレートがあるのでしょうか？

はい、こちらも公式テンプレートが用意されています。NuxtHub のテンプレートは NuxtHub Organization 直下に用意されています。

terminal

npx nuxi init -t hub {project_name}

https://github.com/nuxt-hub/starter

オレオレテンプレートを作ることは可能なのか？

ここまでお読みになった方は疑問になったはずです。

「プロダクトや自分用のオレオレテンプレートの作成は可能か？」

どのテンプレートを見てみてもミニマムであるが故に Linter や Testing などの設定が標準で追加されていません。
しかし、プロダクトや個人で使い回す場合はそれぞれの設定まで含んでいる方が嬉しいです。

A. オレオレテンプレート、作成可能です。

オレオレテンプレート、作成可能です 🙆‍♂️
実際にテンプレートが利用している設定ファイルを覗いてみましょう。

https://github.com/nuxt/starter/blob/c7cea5c035bc5cd4c8ea828d68d70d56892edb2e/templates/hub.json

対象名や URL、tar を設定しているだけであり、本設定のみでテンプレートの利用が実現可能です。

Nuxt CLI はどのように実現しているのか？

Nuxt CLI の init コマンドを除いてみるとunjs/gigetで実現していました。

https://github.com/unjs/giget

前項で見たオプションは downloadTemplate() の設定オプションです。
そのため、json で設定した値を読み込み Nuxt CLI 内で展開することで実現しています。

https://github.com/unjs/giget?tab=readme-ov-file#downloadtemplatesource-options

このオプションを見る限りだと GitHub / GitLab などでも実現できそうですね。プロバイダーが多いのはありがたいです。

おわりに

今回は Nuxt Starter Templates について調査を行いました。
GitHub を用いている場合は GitHub Repository Templateという選択肢がありますが、
ライブラリの更新周りで地味に面倒くさいケースもあります。

そのため、

• Repository Templates を利用するケース
• Nuxt Starter Templates を利用するケース
• オレオレ create-nuxt-app CLI を UnJS で自作する

などなど、ご自身とプロダクトに合ったものを選んで頂けると良いのかなと思います。

本記事が「Nuxt3 にも Nuxt2 時代の create-nuxt-app 相当のものがあるんだ！」と知ってもらい、テンプレートを調べる際の索引となれば幸いです。