Nuxt3にPiniaをインストールする方法

Piniaとは？

PiniaはVueで使われる状態管理ライブラリです。

今回は、Nuxt3で使用するため下記の公式サイトを活用します。

Piniaのインストール

Nuxt3でのPiniaのインストールは下記のコマンドを使用します。

npx nuxi@latest module add pinia

すると、Ok to proceed? (y)と聞かれるので、「y」コマンドを入力します。
すると、下記のようにインストールが始まります。

PS C:\Users\userpc\Desktop\NuxtFDjango\frontend> npx nuxi@latest module add pinia
Need to install the following packages:
nuxi@3.25.1
Ok to proceed? (y) y
ℹ Resolved @pinia/nuxt, adding module...                                                                                nuxi 21:34:14
ℹ Installing @pinia/nuxt@0.11.0 as a dependency                                                                         nuxi 21:34:14

added 1 package, and audited 931 packages in 3s

193 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
ℹ Adding @pinia/nuxt to the modules                                                                                     nuxi 21:34:18
✔ Types generated in .nuxt               

インストール完了すると、次はnuxt.config.ts ファイルを見てみます。

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['vuetify-nuxt-module', '@pinia/nuxt'],
})

さきほど、下記のコマンドでPiniaをインストールしました。このコマンドでnuxt.config.tsのmoduleにpiniaが自動でインストールされています。

npx nuxi@latest module add pinia

nuxt.config.ts に Pinia モジュールを追加

nuxt.config.tsに修正を下記の通り少し加えます。

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: ['vuetify-nuxt-module', '@pinia/nuxt'],
  pinia:{
    authImports:[
      'defineStore'
    ],
  },
})

以上です。

Vue3とNuxt3ではPiniaのインストール方法が違うことに注意する

Piniaと検索すれば、下記がトップ検索に来るかと思います。

この画面の左サイドメニューの「Get Started」をクリックして、パッケージマネージャを選択してPiniaをインストールすると、開発中のアプリのフレームワークがNuxt3の場合下記のエラーが出ます。

"getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

↑のサイトはVueでのインストール方法を記載しています。
Nuxt3で使う場合は、前述のサイトからインストールするようにしてください。