Introduction

Vue Apollo is the official Apollo Client integration for Vue.js. It enables you to manage both local and remote data with GraphQL, using Vue's Composition API.

Ready to try it out? Skip to the Installation.

Features

• Declarative data fetching with useQuery - write a query and receive reactive data
• Automatic caching - respond instantly to queries with cached data
• Real-time updates with subscriptions and @defer streaming
• Full TypeScript support with GraphQL Codegen integration
• Vue-native reactivity - variables can be refs, reactive objects, or getters

Quick Example

<script setup lang="ts">
const { result, loading } = useQuery(gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`)
</script>

<template>
  <div v-if="loading">
    Loading...
  </div>
  <ul v-else>
    <li v-for="user in result?.users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

Compatibility

Package	Version
Vue	3.5+
Apollo Client	4.1+

Apollo Client 4.1 Required

Vue Apollo requires @apollo/client version 4.1.0 or higher. This version includes features like improved TypeScript support that Vue Apollo depends on.

Sponsors

Sponsor on GitHub