Nuxt Apollo

Apollo Client for Nuxt 3.

Features

• ✔️ Based on the latest Vue Apollo plugin
• ✔️ SSR support
• ✔️ Graphql subscription via Websockets
• ✔️ Authorization via built-in hooks
• ✔️ Conditional import of Websockets dependencies

Quick Setup

1. Add nuxt-apollo dependency to your project

1# Using pnpm
2pnpm add -D nuxt-apollo
3
4# Using yarn
5yarn add --dev nuxt-apollo
6
7# Using npm
8npm install --save-dev nuxt-apollo

2. Add nuxt-apollo to the modules section of nuxt.config.ts

1export default defineNuxtConfig({
2  modules: ["nuxt-apollo"],
3  apollo: {
4    httpEndpoint: "", // Required
5    wsEndpoint: "", // Optional
6    credentials: "same-origin",
7    proxyCookies: true,
8  },
9});

That's it! You can now use Nuxt Apollo in your Nuxt app ✨

Usage

APIs

All Vue Apollo composables are auto-imported. Please refer to docs for usage.

Authentication

HTTP

Two options exists either via Authorization header which can be set via apollo:http-auth hook or via a cookie which can be configured via credentials option for client-side and proxyCookies for server-side [docs].

1export default defineNuxtPlugin({
2  hooks: {
3    "apollo:http-auth": (args) => {
4      args.authorization = "Bearer access_token";
5    },
6  },
7});

Websockets

The authentication for useSubscription can be handled via apollo:ws-auth hook. The current supported method is connectionParams [docs].

1export default defineNuxtPlugin({
2  hooks: {
3    "apollo:ws-auth": (args) => {
4      args.params = {};
5    },
6  },
7});

GQL auto-completion

In order to benefit autocomplete suggestion when writing graphql queries, you can install GraphQL: Language Feature Support vscode extension. Then create graphql.config.js at root and paste the config object below.

1module.exports = {
2  projects: {
3    app: {
4      schema: [HTTP_ENDPOINT],
5      documents: [
6        "./pages/**/*.vue",
7        "./components/**/*.vue",
8        "./composables/**/*.ts",
9        "./app.vue",
10      ],
11    },
12  },
13};

Codegen

In order to benefit automatically typed Queries, Mutations and, Subscriptions, you can install Graphql Code Generator.

1npm i -D @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher

Then create codegen.ts at root and paste the config object below.

1const config = {
2  schema: HTTP_ENDPOINT,
3  documents: [
4    "./pages/**/*.vue",
5    "./components/**/*.vue",
6    "./composables/**/*.ts",
7    "./app.vue",
8  ],
9  ignoreNoDocuments: true,
10  generates: {
11    "./gql/": {
12      preset: "client",
13      config: {
14        useTypeImports: true,
15      },
16    },
17  },
18};
19
20export default config;

Finally start GraphQL Code Generator in watch mode, this will type your GraphQL queries as you write them.

1npx graphql-codegen --watch

Development

1# Install dependencies
2npm install
3
4# Generate type stubs
5npm run dev:prepare
6
7# Develop with the playground
8npm run dev
9
10# Build the playground
11npm run dev:build
12
13# Run ESLint
14npm run lint
15
16# Run Vitest
17npm run test
18npm run test:watch
19
20# Release new version
21npm run release