Nuxt3でお世話になっているモジュールたち

私が仕事や個人開発の中で使ったことのあるNuxt3のモジュールについて記載しています。順不同

Nuxt公式のモジュール一覧の方でより詳しい内容を確認できます。
検索機能がついてるので「こんなことしたいけどあるかな？」ってとき、最初に調べると余計な回り道をせずに済んだりするかもしれません。

@vueuse/nuxt

• Vue.js向けに「標準ではないけどあると嬉しい」な機能を多数盛り込んだVueUseプラグインをNuxt向けに導入するためのモジュール
• 導入することによってVueUseに含まれるコンポーザブルが自動インポートされimportの宣言無しで使えるようになる

@pinia/nuxt

• Vue.js向けの状態管理のライブラリことPiniaをNuxt向けに導入するためのモジュール
• 最近のバージョンではstoresディレクトリをPiniaのストアファイルの格納場所として解釈し、自動インポートしてくれたりする（別のディレクトリを設定することもできた気がする）

@pinia-plugin-persistedstate/nuxt

• Piniaのストアの保管先としてローカルストレージを使えるようにするpinia-plugin-persistedstateプラグインをNuxt向けに導入するためのモジュール
• 実はVueUse側にもローカルストレージを管理するためのuseLocalStorageコンポーザブルがあるので「状態管理はすべてPiniaで管理する！」といったこだわりがなければインストールしなくても何とかなったりする

@nuxtjs/supabase

• セルフホスト可能でバックエンドとしてPostgreSQLを使っているBaaSことSupabaseをNuxt向けに導入するためのモジュール

@nuxt/devtools

• 最近はNuxt3の新規プロジェクトを立ち上げるとデフォルトで入っている気がするモジュール
• Vueコンポーネントのインスペクタとして以外にも色々できるみたい（よくわかっていない）
  • 後述するnuxt-mongooseはこのツールのGUIから新規のコレクションやドキュメントの登録、編集ができた

nuxt-primevue

• 高機能なVue向けのUIフレームワークことPrimeVueをNuxt向けに導入するためのモジュール

nuxt-mongoose

• MongoDBをjs環境で扱いやすくするmongooseプラグインをNuxt向けに導入するためのモジュール
• devtool内からNuxtのserver/apiを活用したBREAD(Browse,Read,Edit,Add,Delete)のAPIを生成できる
  • ※私自身がMongoDBとmongooseについて勉強中なので機能を発揮しきれてない部分があるかも。。

@vee-validate/nuxt

• Vue.js向けのバリデーションライブラリことVeeValidateをNuxt向けに導入するためのモジュール

nuxt-icon

• 導入することでIconという名前のコンポーネントを経由して複数のフォントの複数のアイコンを自由に表示できるようになるモジュール

備考

いずれのモジュールも導入することで自動インポートの辺りを上手いこと解決してくれるようです。
また、規模の大きいモジュールはnuxt.config.ts内でTypeScriptの型のサポートが効く状態でオプションを弄れるたりもします。

---

開発中のアプリケーションの中でモジュールとして分離できるコードがある場合、プロジェクト内にオレオレモジュールとして作っていくのもアリかなと考えています。
1つのモジュールとして作成していくことで以下のようなメリットがあるかと思います。

• 他所のNuxt3プロジェクトへのコピペがしやすくなる
  • Gitのサブモジュールとして扱うと尚良いかも？
• 1つの機能のためのコンポーネント、コンポーザブル、プラグイン等についてmodules/[モジュール名]以下にまとめて管理できる

具体的には個人開発のプロジェクトの中で以下のような使い方をしています

• PrimeVue向きのロケールファイルを含むprimelocaleプラグインについて日本語のロケール設定を行う
• ローカルストレージで管理する設定（ライト/ダーク、フォントサイズ、テーマcss等のGUIに関する内容）についてVueUseを使ったローカルストレージの宣言を行う

など

---

以下はこの記事を書いてる際にたまたま開いていたcors-anywhereパッケージを使用したプロキシサーバーをNuxtのフックから起動するオレオレモジュールの例になります。

modules/base/index.ts

import { defineNuxtModule } from "@nuxt/kit";
// @ts-ignore
import * as corsProxy from 'cors-anywhere';

export default defineNuxtModule({
  meta: {
    configKey: "base",
  },
  setup(_options, nuxt) {
    nuxt.hook("build:done", () => {
      const host = '0.0.0.0';
      const port = 8080;

      corsProxy.createServer().listen(port, host, () => {
        console.log(`Running CORS Anywhere on ${host}:${port}`);
      });
    });
  },
});

参考サイト

• Nuxt Modules
  • 参考サイトというかNuxtの公式サイト内のコンテンツ
  • モジュールをカテゴリ別に検索出来て便利です
  • この記事書いてる最中にもTiptap用のNuxtモジュールがあることを知りました。。(使わずにNuxtに導入していた)
  • Vue.jsで使用可能＆著名なOSSであればおおよそNuxt向けに導入するモジュールがあると見てよさそう？
• Module Author Guide
  • こちらもNuxt公式サイト内のページ
  • 公開を想定する「ちゃんとした」モジュール開発を行う場合には読んでおいた方が良いと思う
• Nuxt3のモジュールを作るために、Module Author Guideをみてみた - くらげになりたい。
  • ↑のModule Author Guideの内容について実践された内容が日本語でまとめられているブログ