diff --git a/packages/docs/ssr/nuxt.md b/packages/docs/ssr/nuxt.md
index c53d28fb4a..a581887b72 100644
--- a/packages/docs/ssr/nuxt.md
+++ b/packages/docs/ssr/nuxt.md
@@ -36,7 +36,28 @@ export default defineNuxtConfig({
And that's it, use your store as usual!
-## Using the store outside of `setup()`
+## 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.
+
+```vue{3-4}
+
+```
+
+If your action doesn't resolve a value, you can add any non nullish value:
+
+```vue{3}
+
+```
+
+::: tip
If you want to use a store outside of `setup()`, remember to pass the `pinia` object to `useStore()`. We added it to [the context](https://nuxtjs.org/docs/2.x/internals-glossary/context) so you have access to it in `asyncData()` and `fetch()`:
@@ -50,14 +71,7 @@ export default {
}
```
-As with `onServerPrefetch()`, you don't need to do anything special if you want to call a store action within `asyncData()`:
-
-```vue
-
-```
+:::
## Auto imports
diff --git a/packages/nuxt/playground/app.vue b/packages/nuxt/playground/app.vue
index 68e0c306f7..ed7ff5875a 100644
--- a/packages/nuxt/playground/app.vue
+++ b/packages/nuxt/playground/app.vue
@@ -6,6 +6,8 @@ const counter = useCounter()
useTestStore()
useSomeStoreStore()
+await useAsyncData('counter', () => counter.asyncIncrement().then(() => true))
+
if (process.server) {
counter.increment()
}
diff --git a/packages/nuxt/playground/nuxt.config.ts b/packages/nuxt/playground/nuxt.config.ts
index 947ebaffc6..973b5d95a3 100644
--- a/packages/nuxt/playground/nuxt.config.ts
+++ b/packages/nuxt/playground/nuxt.config.ts
@@ -15,7 +15,8 @@ export default defineNuxtConfig({
vite: {
define: {
__DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
- __TEST__: 'false',
+ __USE_DEVTOOLS__: true,
+ __TEST__: false,
},
},
})
diff --git a/packages/nuxt/playground/stores/counter.ts b/packages/nuxt/playground/stores/counter.ts
index 02c82c742d..043de8610d 100644
--- a/packages/nuxt/playground/stores/counter.ts
+++ b/packages/nuxt/playground/stores/counter.ts
@@ -1,3 +1,5 @@
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
export const useCounter = defineStore('counter', {
state: () => ({
count: 100,
@@ -6,6 +8,13 @@ export const useCounter = defineStore('counter', {
increment() {
this.count += 1
},
+
+ async asyncIncrement() {
+ console.log('asyncIncrement called')
+ await sleep(300)
+ this.count++
+ return true
+ },
},
getters: {
getCount: (state) => state.count,