Nuxt3のモジュール開発は意外と簡単？

Nuxt3のモジュール開発は意外と簡単？ Module Author Guideをのぞいてみよう Vue Fes Japan2023 2023/10/28(土) きらぷか(@kira_puka)

きらぷかとは？ きらぷか (@kira_puka) ● 合同会社めもらば 代表 ● Webアプリの受託開発 ● 趣味: 積読と個人開発 積読ハウマッチ SSSAPI 総額がわかる書籍管理アプリ Googleスプレッドシートの JSON API化サービス

開発の特徴｜Nuxt2系 ● 小規模/多数の開発。立ち上げが頻繁。構成はだいたい同じ A社 B社 … 積読 SSSAPI …

開発の特徴｜Nuxt2系 ● 小規模/多数の開発。立ち上げが頻繁。構成はだいたい同じ ○ ○ UIライブラリ、状態管理、etc… 認証、ダイアログなど汎用的な処理をあらかじめ用意 A社 B社 積読 … SSSAPI … 自作の汎用的な コンポーネント /ストア/Utils etc… UIライブラリ 状態管理 Nuxt2 …

開発の特徴｜Nuxt2系 ● 小規模/多数の開発。立ち上げが頻繁。構成はだいたい同じ ○ ○ ● UIライブラリ、状態管理、etc… 認証、ダイアログなど汎用的な処理をあらかじめ用意 GitHub Template Repositoryをつかって再利用 A社 B社 積読 … SSSAPI … GitHubの Template Repository で再利用 自作の汎用的な コンポーネント /ストア/Utils etc… UIライブラリ 状態管理 Nuxt2 …

Nuxt3.0リリース 🎉

こんにちは、 Nuxt3 移行問題

しかし、UIライブラリ Nuxt3対応せず...

UIライブラリ作るか... ハードル高そう

Module Author Guide ちょっとみてみよ

[ref] Module Author Guide | https://nuxt.com/docs/guide/going-further/modules

• https://nuxt.com/docs/guide/going-further/modules

意外といけるかも？

意外といけるかも？ ←イマココ

モジュールの活用方法(仮)｜Nuxt3系 ● ● Template Repository部分をModule化 GitHub Packagesにてprivate packageで公開 → Moduleにすることで、共通部分の更新がスムーズに A社 B社 積読 … SSSAPI … Module化し GitHub Packages で公開 自作の汎用的な コンポーネント /ストア/Utils etc… → 独自UI 状態管理 Nuxt3 …

モジュールでできること ● コンポーネントの追加 ● Nuxt Configの変更 ● プラグインの追加 ● 型定義の追加 ● Composables/Storeの追加 ● Lifecycle Hookへの処理の追加 ● 他のモジュールの追加/設定 ● CSSの追加 ● 画像などのpublicAssetsの追加 [ref] Recipes | Develop Modules | Module Author Guide https://nuxt.com/docs/guide/going-further/modules#recipes

• https://nuxt.com/docs/guide/going-further/modules#recipes

Quick Start｜ディレクトリ構成 # テンプレートから my-moduleディレクトリを作成 $ npx nuxi init -t module my-module playground/ 動作確認用のNuxtアプリ …/src/module.tsを参照 src/ モジュールの ソース本体 test/ モジュール用の テストコード(vitest) [ref] nuxt/starter at module | https://github.com/nuxt/starter/tree/module

• https://github.com/nuxt/starter/tree/module

Quick Start｜ディレクトリ構成 # テンプレートから my-moduleディレクトリを作成 $ npx nuxi init -t module my-module playground/ 動作確認用のNuxtアプリ …/src/module.tsを参照 src/runtime/ 追加したいプラグインや コンポーネントなどを配置 src/module.ts モジュール自体の設定や 読み込み時に行う処理を書く [ref] nuxt/starter at module | https://github.com/nuxt/starter/tree/module

• https://github.com/nuxt/starter/tree/module

Quick Start｜ディレクトリ構成 # テンプレートから my-moduleディレクトリを作成 $ npx nuxi init -t module my-module 3 playground/ 動作確認用のNuxtアプリ …/src/module.tsを参照 1 1. runtime/に資材を配置 src/runtime/ 追加したいプラグインや コンポーネントなどを配置 2 簡単な流れ src/module.ts モジュール自体の設定や 読み込み時に行う処理を書く [ref] nuxt/starter at module | https://github.com/nuxt/starter/tree/module 2. module.tsに資材を 追加する処理を記述 3. playgroundで動作確認

• https://github.com/nuxt/starter/tree/module

Quick Start｜module.ts＆プラグインの追加(addPlugin) setup() ここでプラグインなどを 追加する処理をおこなう addPlugin 自作したプラグインを追加

例｜コンポーネントの追加(addComponent) [ref] Recipes | Develop Modules | Module Author Guide https://nuxt.com/docs/guide/going-further/modules#recipes addComponent系 ライブラリのコンポーネントも 追加できる

• https://nuxt.com/docs/guide/going-further/modules#recipes

例｜モジュールの追加(installModule) installModule 他のモジュールを追加できる 独自のデフォルト値なども設定可能 [ref] Recipes | Develop Modules | Module Author Guide https://nuxt.com/docs/guide/going-further/modules#recipes

• https://nuxt.com/docs/guide/going-further/modules#recipes

モジュール開発で使うツール ● モジュール開発用のUtility ○ … @nuxt/kit module.tsのaddPluginなどの便利関数を提供 ● モジュールビルド用のCLIツール … @nuxt/module-builder ○ ビルド用のコマンドなど ● モジュールテスト用のUtility … @nuxt/test-utils ○ Nuxt applicationのsetupや実行をなどを便利に 困ったらそれぞれのドキュメントを読むと捗る [ref] Tooling | Develop Modules | Module Author Guide https://nuxt.com/docs/guide/going-further/modules#tooling

• https://nuxt.com/docs/guide/going-further/modules#tooling

参考になるGitHubリポジトリ ● Nuxt UI - @nuxt/ui(https://github.com/nuxt/ui) ○ Headless UIとTailwind CSS製のUIライブラリ ○ コンポーネント/プラグイン/Composablesを利用 ○ `@nuxtjs/tailwindcss`などのモジュールを設定 Nuxt Modulesで似ているモジュールを 探してmodule.tsを読んでみるのも [ref] Nuxt Modules | https://nuxt.com/modules

• https://github.com/nuxt/ui
• https://nuxt.com/modules

まとめ ● モジュール開発は意外と簡単？ ○ ○ ○ runtime/に資材を配置 module.tsで設定 playground/で動作確認 ● 小さく非公開/ローカルでもはじめられる ○ ○ ● GitHub Packagesを使えば無料でprivate packageを公開可能 ローカルのモジュールでもinstallできる ブログ「くらげになりたい。」にもちょっとまとめてます ○ ○ Nuxt3のモジュールを作るために、 Module Author Guideをみてみた GitHub Packagesでプライベート npmパッケージを公開する ご清聴ありがとうございました

• https://www.memory-lovers.blog/entry/2023/07/10/093305
• https://www.memory-lovers.blog/entry/2022/10/13/173000

おまけ

Quick Start｜各種コマンドは用意されている
# 開発モードで使う資材の生成
$ npm run dev:prepare
# 開発サーバの起動
$ npm run dev
# 開発モードでのビルド
$ npm run dev:build

# 本番時のビルド
$ npm run prepack
# 本番資材のリリース /公開
$ npm run release

"scripts": {
"dev":
"nuxi dev playground",
"dev:build":
"nuxi build playground",
"dev:prepare": "nuxt-module-build build --stub
&& nuxt-module-build prepare
&& nuxi prepare playground",
"prepack":
"nuxt-module-build build",
"release":
"npm run lint
&& npm run test
&& npm run prepack
&& changelogen --release
&& npm publish
&& git push --follow-tags",
"lint":
"eslint .",
"test":
"vitest run",
"test:watch": "vitest watch"
},

[ref] Quick Start | Module Author Guide | https://nuxt.com/docs/guide/going-further/modules#quick-start

• https://nuxt.com/docs/guide/going-further/modules#quick-start

ビルドしたときのdistの結果 dist/ buildした モジュール src/ モジュールの ソースコード .vueはトランスパイルされない Tailwindなどを使っている場合は注意

モジュール開発のベストプラクティス ● 非同期のモジュール / Async Modules ○ ○ ● プレフィックスを付ける / Always Prefix Exposed Interfaces ○ ○ ● TypeScriptで開発しやすいように、 TypeScriptで開発し、型を公開 しよう CommonJSを避ける / Avoid CommonJS Syntax ○ ● 他のモジュールとの競合を避けるため、 プレフィックスを付ける 【OK】<FooButton> / useFooBar() 【 NG】<Button> / useBar() TypeScriptで / Be TypeScript Friendly ○ ● setupアップ内の待ち時間は 1秒以下を推奨 時間がかかる処理は Nuxt hookで処理をするべき Nuxt 3はESMネイティブなので、CommonJS構文は使わない。 モジュールの命名規則 ○ 3rd party(nuxt-*) / private&personal(@my-company/nuxt-*) [ref] Best Practices | Develop Modules | Module Author Guide https://nuxt.com/docs/guide/going-further/modules#best-practices

• https://nuxt.com/docs/guide/going-further/modules#best-practices

個人開発で作ったアプリ｜積読ハウマッチ 積読ハウマッチ https://tsundoku.site ● ● 総額がわかる書籍管理アプリ Nuxt.js+Firebase製

• https://tsundoku.site

個人開発で作ったアプリ｜SSSAPI SSSAPI https://sssapi.app ● ● GoogleスプレッドシートのAPI化サービス Nuxt.js+Express.js+Firebase

• https://sssapi.app