vue-apollo

library3.1.2jsnpmunverified

The official Apollo and GraphQL integration for Vue.js. Version 3.1.2 provides reactive GraphQL queries, mutations, and subscriptions via Vue's reactive system. Supports both Apollo Client v2 and v3 (via @apollo/client). Ships TypeScript definitions. Key differentiators: seamless Vue reactivity, `$apollo` helper, and `ApolloProvider` component. Alternatives include `vue-query` (TanStack Query) or raw Apollo Client.

testing

npm install vue-apollo

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-APOLLO

vue-apollo

testingjavascriptv3.1.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueApollo

✓ import VueApollo from 'vue-apollo'

✗ const VueApollo = require('vue-apollo')

ESM default import. CommonJS requires .default: const VueApollo = require('vue-apollo').default

createProvider

✓ import { createProvider } from 'vue-apollo'

✗ import createProvider from 'vue-apollo'

Named export, not default.

ApolloQuery

✓ import { ApolloQuery } from 'vue-apollo'

Component import, available in both CJS and ESM.

Setup Apollo Client with VueApollo plugin and instantiate Vue app.

import Vue from 'vue'; import VueApollo from 'vue-apollo'; import { ApolloClient, InMemoryCache } from '@apollo/client'; import { createHttpLink } from '@apollo/client/link/http'; const httpLink = createHttpLink({ uri: 'https://api.example.com/graphql' }); const cache = new InMemoryCache(); const apolloClient = new ApolloClient({ link: httpLink, cache }); const apolloProvider = new VueApollo({ defaultClient: apolloClient }); Vue.use(apolloProvider); new Vue({ render: h => h(App), }).$mount('#app');

Debug

Known issues

breakingvue-apollo v3 requires @apollo/client v3 instead of apollo-client v2

fix

Replace 'apollo-client' with '@apollo/client' and adjust imports accordingly.

affects: >=3.0.0

deprecatedVue.extend() with apollo option is deprecated; use Vue.prototype.$apollo or Composition API

fix

Use ApolloProvider.provide or useApollo composable.

affects: >=3.0.0

gotchaVueApollo must be installed before creating the root Vue instance

fix

Call Vue.use(VueApollo) before new Vue().

affects: >=0.1.0

gotchaThe `apollo` option cannot be used in functional components

fix

Wrap functional component in a stateful component.

affects: >=1.0.0

deprecated`$apollo.queries` object syntax is deprecated in favor of `apollo` option object

fix

Use the `apollo` option in component definition.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'vue-apollo'

Missing npm install vue-apollo or incorrect import path

fix

npm install vue-apollo && import VueApollo from 'vue-apollo'

Must use import to load ES Module: vue-apollo

Using require() in an ESM context or node --experimental-modules without .mjs extension

fix

Switch to import statement or use require('vue-apollo').default

TypeError: Cannot read property 'defaultClient' of undefined

VueApollo not installed before accessing $apollo or provider missing

fix

Ensure Vue.use(VueApollo) is called and apolloProvider is provided to root Vue instance

Upgrade

Version history

3.1.2latest on npm

Audit

Dependencies

graphql-tagoptionalRequired for parsing GraphQL queries and mutations

@apollo/clientoptionalPeer dependency for Apollo Client v3; v2 still supported via apollo-client

Agent activity

14 hits · last 30 days

node

Resources

githubhttps://github.com/Akryum/vue-apollo ↗

packagevue-apollo ↗

homepagehttps://github.com/Akryum/vue-apollo#readme ↗