Installation

Step 1: Install dependencies

Install Apollo Client and Vue Apollo:

npm

npm install @apollo/client @vue/apollo-composable@next graphql

yarn

yarn add @apollo/client @vue/apollo-composable@next graphql

pnpm

pnpm add @apollo/client @vue/apollo-composable@next graphql

@vue/apollo-components lists @vue/apollo-composable as a peer dependency, so install both.

npm

npm install @apollo/client @vue/apollo-composable@next @vue/apollo-components@next graphql

yarn

yarn add @apollo/client @vue/apollo-composable@next @vue/apollo-components@next graphql

pnpm

pnpm add @apollo/client @vue/apollo-composable@next @vue/apollo-components@next graphql

Pre-release version

Vue Apollo v5 is currently in pre-release. The @next tag installs the latest pre-release build.

Choosing an API

The selector at the top of the sidebar switches every example in the guide between the Composition API (useQuery and friends) and the Components API (<ApolloQuery> and friends). They are the same library, so you can pick per component and change your mind later. See the API overview for how to choose.

Step 2: Create an Apollo Client

Create a file to configure your Apollo Client instance:

// src/apollo.ts
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'

export const apolloClient = new ApolloClient({
  link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
  cache: new InMemoryCache(),
})

Step 3: Provide Apollo Client to Vue

Use Vue's provide/inject system to make the client available to every component:

// src/main.ts
import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp } from 'vue'
import { apolloClient } from './apollo'
import App from './App.vue'

const app = createApp(App)
app.provide(DefaultApolloClient, apolloClient)
app.mount('#app')

That's it. You can now use useQuery, useMutation, and the other composables in any component.

That's it. You can now use <ApolloQuery>, <ApolloMutation> and the rest in any template.

Step 4: Your first query

Verify the setup with a simple query:

<script setup lang="ts">
const { current } = useQuery(gql`
  query Hello {
    hello
  }
`)
</script>

<template>
  <div v-if="current.loading">
    Loading...
  </div>
  <div v-else-if="current.error">
    Error: {{ current.error.message }}
  </div>
  <div v-else-if="current.resultState === 'complete'">
    {{ current.result.hello }}
  </div>
</template>

<script setup lang="ts">
import { ApolloQuery } from '@vue/apollo-components'
</script>

<template>
  <ApolloQuery
    :query="gql`
      query Hello {
        hello
      }
    `"
  >
    <template #loading>
      Loading...
    </template>
    <template #error="{ error }">
      Error: {{ error.message }}
    </template>
    <template #data="{ data }">
      {{ data.hello }}
    </template>
  </ApolloQuery>
</template>

IDE integration

VS Code

Install the Apollo GraphQL extension and create apollo.config.js:

export default {
  client: {
    service: {
      name: 'my-app',
      url: 'http://localhost:4000/graphql',
      // localSchemaFile: './path/to/schema.graphql', // instead of url
    },
    includes: ['src/**/*.vue', 'src/**/*.ts'],
  },
}

WebStorm

Install the JS GraphQL plugin and create .graphqlconfig:

{
  "name": "My App",
  "schemaPath": "./schema.graphql",
  "extensions": {
    "endpoints": {
      "Default": {
        "url": "http://localhost:4000/graphql",
        "introspect": true
      }
    }
  }
}

Next steps

Now that Apollo Client is set up, learn how to fetch data:

Queries →