はじめに
こんにちは、がんがんです。
Nuxt3 には Auto-imports 機能というありがたい機能があります。
本機能のおかげで/components、/composables直下のファイルや Vue3 API であるref、computedなどが import 不要で利用できます。非常に便利です。
本機能を利用しているとき、ふと「Pinia も import 不要に出来ないかな？」と思いました。
そこで Pinia の公式ドキュメントや GitHub を調べてみました。
1 行まとめ
Pinia さん、Auto-imports できます。しかも、複雑な設定は特に必要なかったです。
準備： Nuxt3 + Pinia の環境構築
Nuxt3 の環境を構築します。不要な方はスキップしてください。
Nuxt3 をインストールする
npx nuxi@latest init pinia-sample && cd pinia-sample
開発モードで起動し http://localhost:3000 にアクセス -> 表示されれば完了です。
Pinia のNuxt.jsドキュメントを見ながら環境構築を行います。
npm i pinia @pinia/nuxt
nuxt.config.ts の modules 設定を追加して準備完了です。
export default defineNuxtConfig({
// ... other options
modules: [
"@pinia/nuxt",
// ... other modules
],
pinia: {
// ... pinia options
}
});
Pinia の Auto Imports 設定
Pinia の ModuleOptions としてautoImportsが用意されています。公式ドキュメントを参考にしながら設定すれば良さそうです。
usePiniaはデフォルトで Auto Imports されるためdefineStore、storeToRefsを追加してます。
export default defineNuxtConfig({
// ... other options
modules: [
"@pinia/nuxt",
// ... other modules
],
pinia: {
+ autoImports: [
+ "defineStore",
+ "storeToRefs"
+ ],
}
});
nuxt.config.ts の設定が完了したら.nuxt/*を再生成します。
新規 Nuxt アプリの場合"postinstall": "nuxt prepare"コマンドが用意されているので、再度npm installで問題ないです。
インストール完了後 .nuxt/imports.d.tsを確認します。先ほど追加した 2 つが import に追加されているかと思います。
- export { usePinia} from '../../node_modules/@pinia/nuxt/dist/runtime/composables';
+ export { usePinia, defineStore, storeToRefs } from '../../node_modules/@pinia/nuxt/dist/runtime/composables';
Q. 作成したストアを Auto Imports したい場合はどうしたらいいのか？
GitHub を見る限りだとdisableVuexとautoImportsの 2 つのオプションしかなさそうです。
そのため、nuxt.config.ts のimports.dirs設定を行う必要がありそうです。
export default defineNuxtConfig({
// ... other options
modules: [
"@pinia/nuxt",
// ... other modules
],
+ imports: {
+ dirs: ["stores"],
+ },
pinia: {
autoImports: [
"defineStore",
"storeToRefs"
],
}
});
Q. テストファイルでも Auto Imports は動くのか？
現状の設定で動けばいいなと思いましたがReferenceError: defineStore is not definedが発生して失敗しました(それはそう)。
❯ stores/counter.ts (0)
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FAIL stores/counter.ts [ stores/counter.ts ]
ReferenceError: defineStore is not defined
❯ stores/counter.ts:5:32
3| * @module stores/counter
4| */
5| export const useCounterStore = defineStore(
| ^
6| "counter",
7| (): {
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
解決策として今回はAnthony Fu 氏が開発されているunplugin-auto-importプラグインを使用しました。
/// <reference types="vitest" />
import Vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
Vue(),
AutoImport({
imports: [
// ... other imports
"pinia",
],
}),
],
// ... other options
test: {
// ... test options
}
});
.nuxt/* を再生成し再度テストを実行します。今度はReferenceError: defineStore is not definedが発生しないかと思います。
pinia.autoImports の深淵を覗く
pinia.autoImports はどういう実装がされているのか。実際に GitHub の奥地へと潜入し深淵を覗いてみます。
auto imports 設定が追加されているのは下記の箇所です。nuxt/kitのaddImportsを用いています。
このaddImports自体はunjs/unimportの型情報を利用しています。
unjs/unimportの README には以下のような記述がありました。
Unified utils for auto importing APIs in modules, used in nuxt and unplugin-auto-import
Nuxt の Auto-imports も unplugin-auto-import 同様に uninmport がベースになっているようです。
nuxt/kitが提供しているということは、自分で作成した Nuxt モジュールに Auto-imports 設定を組み込めるということを意味します。これはモジュール作成が捗りますね。
おわりに
今回は Pinia の Auto Imports 設定にしてついてまとめました。
Nuxt3 のAuto-importsは非常に便利で手放せない存在です。
Nuxt と合わせて利用される Pinia でも簡単に設定することができメンテナチームに感謝したい限りです。
[余談]
Pinia の PR を眺めてる感じだと、次回のブレイキングチェンジで Module Options 周りが変わるかもですね。もし変更された場合はそちらについての記事書きます。
「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries
Discussion