docs: update installation instructions and Nuxt guide for Apollo Client setup

Author: nickmessing

packages/docs/guide/installation.md

@@ -7,21 +7,21 @@ Install Apollo Client and Vue Apollo:
 ::: code-group
 
 ```shell [npm]
-npm install @apollo/client@next @vue/apollo-composable@next graphql
+npm install @apollo/client @vue/apollo-composable@next graphql
 ```
 
 ```shell [yarn]
-yarn add @apollo/client@next @vue/apollo-composable@next graphql
+yarn add @apollo/client @vue/apollo-composable@next graphql
 ```
 
 ```shell [pnpm]
-pnpm add @apollo/client@next @vue/apollo-composable@next graphql
+pnpm add @apollo/client @vue/apollo-composable@next graphql
 ```
 
 :::
 
-::: warning Pre-release Versions
-Vue Apollo v5 requires Apollo Client 4.1+, both currently in pre-release. The `@next` tag installs the latest pre-release version.
+::: warning Pre-release Version
+Vue Apollo v5 is currently in pre-release. The `@next` tag installs the latest pre-release version.
 :::
 
 ## Step 2: Create an Apollo Client

packages/docs/ssr/nuxt.md

@@ -1,5 +1,124 @@
 # Nuxt
 
-::: warning Work in Progress
-This page is under construction.
+This guide covers setting up Vue Apollo with server-side rendering (SSR) in Nuxt.
+
+::: warning @nuxtjs/apollo Compatibility
+The `@nuxtjs/apollo` module does not yet support Vue Apollo v5. This guide shows how to set up Apollo Client manually using a Nuxt plugin.
 :::
+
+## Step 1: Install Dependencies
+
+Install Apollo Client and Vue Apollo:
+
+::: code-group
+
+```shell [npm]
+npm install @apollo/client @vue/apollo-composable@next graphql
+```
+
+```shell [yarn]
+yarn add @apollo/client @vue/apollo-composable@next graphql
+```
+
+```shell [pnpm]
+pnpm add @apollo/client @vue/apollo-composable@next graphql
+```
+
+:::
+
+## Step 2: Create Apollo Plugin
+
+Create a Nuxt plugin to initialize Apollo Client with SSR support:
+
+```ts
+import type { NormalizedCacheObject } from '@apollo/client'
+// app/plugins/apollo.ts
+import {
+  ApolloClient,
+  HttpLink,
+  InMemoryCache
+
+} from '@apollo/client'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+declare module 'nuxt/app' {
+  interface NuxtPayload {
+    apollo?: NormalizedCacheObject
+  }
+}
+
+export default defineNuxtPlugin({
+  name: 'apollo',
+  enforce: 'pre',
+
+  setup(nuxtApp) {
+    const cache = new InMemoryCache()
+
+    // Restore cache from server payload on client
+    if (import.meta.client && nuxtApp.payload.apollo) {
+      cache.restore(nuxtApp.payload.apollo)
+    }
+
+    const httpLink = new HttpLink({
+      uri: 'https://example.com/graphql',
+    })
+
+    const client = new ApolloClient({
+      link: httpLink,
+      cache,
+      ssrMode: import.meta.server,
+      // Prevent refetching on client when we already have data
+      ssrForceFetchDelay: import.meta.client ? 100 : undefined,
+    })
+
+    // Provide to Vue app
+    nuxtApp.vueApp.provide(DefaultApolloClient, client)
+
+    // Extract cache after render on server
+    if (import.meta.server) {
+      nuxtApp.hook('app:rendered', () => {
+        nuxtApp.payload.apollo = client.extract() as NormalizedCacheObject
+      })
+    }
+  },
+})
+```
+
+This plugin:
+- Creates an Apollo Client instance with SSR mode enabled on the server
+- Restores the cache from the server payload on the client (hydration)
+- Extracts the cache after server render and sends it to the client via the Nuxt payload
+
+## Step 3: Use in Components
+
+You can now use Vue Apollo composables in your components:
+
+```vue
+<script setup>
+import { gql } from '@apollo/client'
+import { useQuery } from '@vue/apollo-composable'
+
+const { current } = useQuery(gql`
+  query {
+    company {
+      ceo
+    }
+  }
+`)
+</script>
+
+<template>
+  <div>
+    <div v-if="current.resultState === 'complete'">
+      {{ current.result.company.ceo }}
+    </div>
+  </div>
+</template>
+```
+
+## Next Steps
+
+Learn more about fetching data with queries:
+
+[Queries →](/data/queries)

packages/vue-apollo-composable/package.json

@@ -44,7 +44,7 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@apollo/client": "^4.1.0-alpha.8",
+    "@apollo/client": "^4.1.0",
     "@vue/reactivity": "^3.5.0",
     "@vue/runtime-core": "^3.5.0",
     "@vueuse/core": "^14.0.0",

pnpm-lock.yaml

@@ -7,7 +7,6 @@ shellEmulator: true
 trustPolicy: no-downgrade
 
 trustPolicyExclude:
-  - '@apollo/client@4.1.0-alpha.8'
   - undici-types@6.21.0
   - vite@5.4.21
   - chokidar@4.0.3
@@ -18,7 +17,7 @@ packages:
 catalog:
   '@akryum/sheep': ^0.5.1
   '@antfu/eslint-config': ^6.5.1
-  '@apollo/client': ^4.1.0-alpha.8
+  '@apollo/client': ^4.1.0
   '@graphql-codegen/cli': ^6.1.0
   '@graphql-yoga/plugin-defer-stream': ^3.17.1
   '@microsoft/api-extractor': ^7.55.2