Quick Start

Integrate Nuxt Apollo into your project.

Installation

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

   yarn add -D @nuxtjs/apollo@next
   

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://spacex-production.up.railway.app'
         }
       },
     },
   })
   

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>