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

# Using pnpm
pnpm add -D nuxt-apollo

# Using yarn
yarn add --dev nuxt-apollo

# Using npm
npm install --save-dev nuxt-apollo

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

export default defineNuxtConfig({
  modules: ["nuxt-apollo"],
  apollo: {
    httpEndpoint: "", // Required
    wsEndpoint: "", // Optional
    credentials: "same-origin",
    proxyCookies: true,
  },
});

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].

export default defineNuxtPlugin({
  hooks: {
    "apollo:http-auth": (args) => {
      args.authorization = "Bearer access_token";
    },
  },
});

Websockets

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

export default defineNuxtPlugin({
  hooks: {
    "apollo:ws-auth": (args) => {
      args.params = {};
    },
  },
});

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.

module.exports = {
  projects: {
    app: {
      schema: [HTTP_ENDPOINT],
      documents: [
        "./pages/**/*.vue",
        "./components/**/*.vue",
        "./composables/**/*.ts",
        "./app.vue",
      ],
    },
  },
};

Codegen

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

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

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

const config = {
  schema: HTTP_ENDPOINT,
  documents: [
    "./pages/**/*.vue",
    "./components/**/*.vue",
    "./composables/**/*.ts",
    "./app.vue",
  ],
  ignoreNoDocuments: true,
  generates: {
    "./gql/": {
      preset: "client",
      config: {
        useTypeImports: true,
      },
    },
  },
};

export default config;

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

npx graphql-codegen --watch

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release