公式ドキュメントより。[[Nuxt Bridge]]を使わないインストール方法。
<div class="link-card">
<div class="link-card-header">
<img src="https://pinia.vuejs.org/logo.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">pinia.vuejs.org</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Nuxt.js | Pinia</p>
</div>
<div class="link-card-description">
Intuitive, type safe, light and flexible Store for Vue
</div>
</div>
</div>
<a href="https://pinia.vuejs.org/ssr/nuxt.html#nuxt-2-without-bridge"></a>
</div>
[[Composition API]]は既に対応されているので[[Nuxt Composition API]]は使用しない。
```console
npm install pinia @pinia/
[email protected]
```
[[nuxt.config]]を修正。
```js
export default {
buildModules: [
'@pinia/nuxt',
],
}
```
[[TypeScript]]対応のため[[tsconfig.json]]の`types`に追加。
```json
"types": [
"@pinia/nuxt"
]
```
## named exportがimportできないエラー
`npm run dev`でエラーが出る。
```
Can't import the named export 'Vue2' from non EcmaScript module (only default export is available)
```
ググったところ1件ヒット。
<div class="link-card">
<div class="link-card-header">
<img src="https://blog.epigno.jp/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">blog.epigno.jp</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Epigno Tech Blog</p>
</div>
<div class="link-card-description">
Epigno社内で出会う技術問題の特集
</div>
</div>
</div>
<a href="https://blog.epigno.jp/en/blog/challenges-with-switching-to-pinia/#post-installation-bug"></a>
</div>
以下のIssueに回避策がある。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Can't import the named export from non EcmaScript module (only default export is available) · Issue #675 · vuejs/pinia</p>
</div>
<div class="link-card-description">
Steps to reproduce the behavior Use Vue-cli to create a Vue 3 app with Typescript. Run yarn add pini...
</div>
</div>
<img src="https://opengraph.githubassets.com/c3033411d86d1aa1b56548adc057e3df633f6c8f15aad14919c4186271f1fc9a/vuejs/pinia/issues/675" class="link-card-image" />
</div>
<a href="https://github.com/vuejs/pinia/issues/675"></a>
</div>
[[nuxt.config]]に以下を追加。
```js
export default {
build: {
extend(config) {
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
})
},
},
}
```
> [!hint]
> 場合によっては `include` を `/node_modules|.nuxt/` にしなければいけないこともある
## [[vue-demi]]に関するエラー
別のエラーが発生。
```
ERROR Failed to compile with 1 errors
This dependency was not found:
* vue-demi in ./.nuxt/dist.plugin.637f2e66.mjs
To install it, you can run: npm install --save vue-demi
```
[[vue-demi]]は[[Pinia]]や[[@pinia.nuxt]]の依存関係として存在するはずだが、明示的にインストールする。
```console
npm i vue-demi
```
これでOK。