Quick Start

Integrate Nuxt Apollo into your project.

Installation

  1. Add the @nuxtjs/apollo development dependency.
    Yarn
    yarn add -D @nuxtjs/apollo@next
    NPM
    npm i -D @nuxtjs/apollo@next
    pnpm
    pnpm add @nuxtjs/apollo@next --save-dev
  2. Enable the module.
    nuxt.config.ts
    import { defineNuxtConfig } from 'nuxt/config'export default defineNuxtConfig({  modules: ['@nuxtjs/apollo'],})
  3. Add Nuxt Apollo Configuration.
    nuxt.config.ts
    import { defineNuxtConfig } from 'nuxt/config'export default defineNuxtConfig({  modules: ['@nuxtjs/apollo'],  apollo: {    clients: {      default: {        httpEndpoint: 'https://studio.apollographql.com/public/SpaceX-pxxbxen/variant/current/explorer'      }    },  },})
  4. Example Usage.
    Nuxt Apollo automatically imports the gql tag function as well as key composables.
    app.vue
    <template>  <p>There are {{ data?.ships?.length || 0 }} ships.</p></template><script lang="ts" setup>const query = gql`  query getShips($limit: Int!) {    ships(limit: $limit) {      id      name    }  }`const variables = { limit: 5 }const { data } = await useAsyncQuery(query, variables)</script>