Quick Start

Integrate Nuxt Apollo into your project.

Installation

1. Add the @nuxtjs/apollo development dependency.
   YarnNPM

   Yarn

   yarn add -D @nuxtjs/apollo@next

   Copy to clipboard

   NPM

   npm i -D @nuxtjs/apollo@next

   Copy to clipboard
2. Enable the module.
   nuxt.config.ts

   import { defineNuxtConfig } from 'nuxt/config'export default defineNuxtConfig({  modules: ['@nuxtjs/apollo'],})

   Copy to clipboard
3. Add Nuxt Apollo Configuration.
   nuxt.config.ts

   import { defineNuxtConfig } from 'nuxt/config'export default defineNuxtConfig({  modules: ['@nuxtjs/apollo'],  apollo: {    clients: {      default: {        httpEndpoint: 'https://api.spacex.land/graphql'      }    },  },})

   Copy to clipboard
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>

   Copy to clipboard