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

Prefer the Nuxt Pinia instance over the global active Pinia instance. Since the Nuxt Pinia instance is discarded after each request, it ensures that we can't accidentally use one from another request. Additionally, `usePinia` will throw an error when used outside of a Nuxt-aware context.

The error is as follows in dev :
> [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.

Author: pguilbert

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

@@ -0,0 +1,17 @@
+<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 counter = await useFancyCounter()
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ counter.$state.count }}</p>
+    <button @click="counter.increment()">+</button>
+  </div>
+</template>

packages/nuxt/test/nuxt.spec.ts

@@ -37,4 +37,8 @@ describe('Nuxt', async () => {
   it('can auto import from layers', async () => {
     expect(await $fetch('/')).toContain('Layer store: 0')
   })
+
+  it('throws an error server-side when the nuxt context is not available', async () => {
+    await expect($fetch('/usage-after-await')).rejects.toThrow()
+  })
 })