fix: throw when a store is used outside of a Nuxt-aware context.

README.md

@@ -5,9 +5,9 @@
 </p>
 <br/>
 <p align="center">
-  <a href="https://npmjs.com/package/pinia"><img src="https://badgen.net/npm/v/pinia" alt="npm package"></a>
-  <a href="https://github.com/vuejs/pinia/actions/workflows/ci.yml"><img src="https://github.com/vuejs/pinia/actions/workflows/ci.yml/badge.svg" alt="build status"></a>
-  <a href="https://codecov.io/gh/vuejs/pinia"><img src="https://codecov.io/gh/vuejs/pinia/graph/badge.svg?token=rU2xxQ6BGH"/></a>
+  <a href="https://npmjs.com/package/pinia"><img src="https://badgen.net/npm/v/pinia/v2" alt="npm package"></a>
+  <a href="https://github.com/vuejs/pinia/actions/workflows/ci.yml"><img src="https://github.com/vuejs/pinia/actions/workflows/ci.yml/badge.svg?branch=v2" alt="build status"></a>
+  <a href="https://codecov.io/gh/vuejs/pinia"><img src="https://codecov.io/gh/vuejs/pinia/branch/v2/graph/badge.svg?token=rU2xxQ6BGH"></a>
 </p>
 <br/>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinia/root",
-  "packageManager": "pnpm@9.15.3",
+  "packageManager": "pnpm@10.2.0",
   "type": "module",
   "private": true,
   "workspaces": [

packages/docs/.vitepress/config/en.ts

@@ -49,6 +49,10 @@ export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           },
         ],
       },
+      {
+        text: 'v2.x',
+        items: [{ text: 'v3.x', link: 'https://pinia.vuejs.org' }],
+      },
     ],
 
     sidebar: {

packages/docs/.vitepress/config/shared.ts

@@ -133,12 +133,11 @@ export const sharedConfig = defineConfig({
     },
 
     search: {
-      provider: 'algolia',
+      provider: 'local',
       options: {
-        appId: '69Y3N7LHI2',
-        apiKey: '45441f4b65a2f80329fd45c7cb371fea',
-        indexName: 'pinia',
-        locales: { ...zhSearch },
+        locales: {
+          ...zhSearch,
+        },
       },
     },
 

packages/docs/.vitepress/config/zh.ts

@@ -58,6 +58,10 @@ export const zhConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
           },
         ],
       },
+      {
+        text: 'v2.x',
+        items: [{ text: 'v3.x', link: 'https://pinia.vuejs.org' }],
+      },
     ],
     sidebar: {
       '/zh/api/': [

packages/docs/core-concepts/index.md

@@ -127,7 +127,7 @@ You can define as many stores as you want and **you should define each store in
 
 Once the store is instantiated, you can access any property defined in `state`, `getters`, and `actions` directly on the store. We will look at these in detail in the next pages but autocompletion will help you.
 
-Note that `store` is an object wrapped with `reactive`, meaning there is no need to write `.value` after getters but, like `props` in `setup`, **we cannot destructure it**:
+Note that `store` is an object wrapped with `reactive`, meaning there is no need to write `.value` after getters but, like any `reactive()` object in Vue, [**we lose reactivity when destructuring it**](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive):
 
 ```vue
 <script setup>

packages/docs/core-concepts/outside-component-usage.md

@@ -42,7 +42,7 @@ const router = createRouter({
 })
 
 // ❌ Depending on the order of imports this will fail
-const store = useStore()
+const store = useUserStore()
 
 router.beforeEach((to, from, next) => {
   // we wanted to use the store here
@@ -53,7 +53,7 @@ router.beforeEach((to, from, next) => {
 router.beforeEach((to) => {
   // ✅ This will work because the router starts its navigation after
   // the router is installed and pinia will be installed too
-  const store = useStore()
+  const store = useUserStore()
 
   if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
 })

packages/docs/ssr/nuxt.md

@@ -43,22 +43,23 @@ And that's it, use your store as usual!
 
 ## Awaiting for actions in pages
 
-As with `onServerPrefetch()`, you can call a store action within `asyncData()`. Given how `useAsyncData()` works, **make sure to return a value**. This will allow Nuxt to skip running the action on the client side and reuse the value from the server.
+As with `onServerPrefetch()`, you can call a store action within the `callOnce()` composable.
+This will allow Nuxt to run the action only once and avoids refetching data that is already present.
 
 ```vue{3-4}
 <script setup>
 const store = useStore()
 // we could also extract the data, but it's already present in the store
-await useAsyncData('user', () => store.fetchUser())
+await callOnce('user', () => store.fetchUser())
 </script>
 ```
 
-If your action doesn't resolve a value, you can add any non nullish value:
+Depending on your requirements, you can choose to run the action only once on the client, or on every navigation (which is closer to data fetching behavior of `useFetch()`/`useAsyncData()`)
 
 ```vue{3}
 <script setup>
 const store = useStore()
-await useAsyncData('user', () => store.fetchUser().then(() => true))
+await callOnce('user', () => store.fetchUser(), { mode: 'navigation' })
 </script>
 ```
 

packages/nuxt/global.d.ts

@@ -0,0 +1,2 @@
+// Global compile-time constants
+declare var __TEST__: boolean

packages/nuxt/playground/pages/usage-after-await.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+const useFancyCounter = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  // ❌ bad usage: the use of a store after an await could lead to using the wrong pinia instance.
+  return useCounter()
+}
+
+const event = useRequestEvent()
+useNuxtApp().hook('vue:error', (error) => {
+  if (event) {
+    setResponseStatus(event, 500, String(error))
+  }
+})
+
+const counter = await useFancyCounter()
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ counter.$state.count }}</p>
+    <button @click="counter.increment()">+</button>
+  </div>
+</template>

packages/nuxt/src/runtime/composables.ts

@@ -1,4 +1,31 @@
 import { useNuxtApp } from '#app'
+import {
+  defineStore as _defineStore,
+  type Pinia,
+  type StoreGeneric,
+} from 'pinia'
 export * from 'pinia'
 
-export const usePinia = () => useNuxtApp().$pinia
+export const usePinia = () => useNuxtApp().$pinia as Pinia | undefined
+
+export const defineStore: typeof _defineStore =
+  process.env.NODE_ENV === 'production' && !__TEST__
+    ? _defineStore
+    : (...args: [idOrOptions: any, setup?: any, setupOptions?: any]) => {
+        if (!import.meta.server) {
+          return _defineStore(...args)
+        }
+
+        const originalUseStore = _defineStore(...args)
+        function useStore(
+          pinia?: Pinia | null,
+          hot?: StoreGeneric
+        ): StoreGeneric {
+          return originalUseStore(pinia || usePinia(), hot)
+        }
+
+        useStore.$id = originalUseStore.$id
+        useStore._pinia = originalUseStore._pinia
+
+        return useStore
+      }

packages/nuxt/test/nuxt.spec.ts

@@ -33,4 +33,10 @@ describe('works with nuxt', async () => {
     expect(html).not.toContain('I should not be serialized or hydrated')
     expect(html).toContain('skipHydrate-wrapped state is correct')
   })
+
+  it('throws an error server-side when the nuxt context is not available', async () => {
+    await expect($fetch('/usage-after-await')).rejects.toThrowError(
+      '[nuxt] instance unavailable'
+    )
+  })
 })

packages/nuxt/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "./playground/.nuxt/tsconfig.json",
   "include": [
     "./shims.d.ts",
+    "./global.d.ts",
     // missing in the playground
     "./src"
   ]

packages/testing/CHANGELOG.md

@@ -1,3 +1,9 @@
+### [0.1.8](https://github.com/vuejs/pinia/compare/@pinia/testing@0.1.7...@pinia/testing@0.1.8) (2025-02-11)
+
+### Features
+
+- **testing:** warn about incorrect createSpy ([394f655](https://github.com/vuejs/pinia/commit/394f6553d13f2b46c6e52a68145c24699b98e7fa)), closes [#2896](https://github.com/vuejs/pinia/issues/2896)
+
 ## [0.1.7](https://github.com/vuejs/pinia/compare/@pinia/testing@0.1.6...@pinia/testing@0.1.7) (2024-11-03)
 
 No code changes in this release.

packages/testing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pinia/testing",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Testing module for Pinia",
   "keywords": [
     "vue",

scripts/release.mjs

@@ -8,15 +8,14 @@ import semver from 'semver'
 import prompts from '@posva/prompts'
 import { execa } from 'execa'
 import pSeries from 'p-series'
-import { globby } from 'globby'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
 const args = minimist(process.argv.slice(2))
 const {
   skipBuild,
-  tag: optionTag,
+  tag: optionTag = 'legacy',
   dry: isDryRun,
   skipCleanCheck: skipCleanGitCheck,
   noDepsUpdate,