docs: add explanation of composable lifecycle (#8116)

Co-authored-by: Daniel Roe <daniel@roe.dev>

docs/2.guide/1.concepts/1.auto-imports.md

@@ -17,7 +17,9 @@ You can find a reference for auto-imported [composables](/docs/api/composables/u
 Auto imports don't currently work within the [server directory](/docs/guide/directory-structure/server).
 ::
 
-## Nuxt Auto-imports
+## Built-in Auto-imports
+
+### Nuxt Auto-imports
 
 Nuxt auto-imports functions and composables to perform [data fetching](/docs/getting-started/data-fetching), get access to the [app context](/docs/api/composables/use-nuxt-app) and [runtime config](/docs/guide/going-further/runtime-config), manage [state](/docs/getting-started/state-management) or define components and plugins.
 
@@ -28,7 +30,7 @@ Nuxt auto-imports functions and composables to perform [data fetching](/docs/get
 </script>
 ```
 
-## Vue Auto-imports
+### Vue Auto-imports
 
 Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hooks and helpers that are auto-imported by Nuxt.
 
@@ -40,6 +42,48 @@ Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hoo
 </script>
 ```
 
+### Using Vue and Nuxt composables
+
+<!-- TODO: move to separate page with https://github.com/nuxt/nuxt/issues/14723 and add more information -->
+
+When you are using the built-in composition API composables provided by Vue and Nuxt, be aware that many of them rely on being called in the right _context_.
+
+During a component lifecycle, Vue tracks the temporary instance of the current component (and similarly, Nuxt tracks a temporary instance of `nuxtApp`) via a global variable, and then unsets it in same tick. This is essential when server rendering, both to avoid cross-request state pollution (leaking a shared reference between two users) and to avoid leakage between different components.
+
+That means that (with very few exceptions) you cannot use them outside a Nuxt plugin, Nuxt route middleware or Vue setup function. On top of that, you must use them synchronously - that is, you cannot use `await` before calling a composable, except within `<script setup>` blocks, in `defineNuxtPlugin` or in `defineNuxtRouteMiddleware`, where we perform a transform to keep the synchronous context even after the `await`.
+
+If you get an error message like `Nuxt instance is unavailable` then it probably means you are calling a Nuxt composable in the wrong place in the Vue or Nuxt lifecycle.
+
+See the full explanation in this [comment](https://github.com/nuxt/framework/issues/5740#issuecomment-1229197529).
+
+::NeedContribution
+::
+
+#### Example
+
+**Example:** Breaking code:
+
+```ts [composables/example.ts]
+// trying to access runtime config outside a composable
+const config = useRuntimeConfig()
+
+export const useMyComposable = () => {
+  // accessing runtime config here
+}
+```
+
+**Example:** Fixing the error:
+
+```ts [composables/example.ts]
+export const useMyComposable = () => {
+  // Because your composable is called in the right place in the lifecycle,
+  // useRuntimeConfig will also work
+  const config = useRuntimeConfig()
+
+  // ...
+}
+```
+
 ## Directory-based Auto-imports
 
 Nuxt directly auto-imports files created in defined directories: