Use Apollo with VueJS

As you know, MDG is working on an awesome new data layer called Apollo. Why not use it with another amazing technology like VueJS?

To do just that, I created an npm package that allows you to write GraphQL queries in your Vue components while using Apollo under the hood: vue-apollo

Use it in your Vue app

Install the package in your project folder alongside the other apollo dependencies, for example:

npm instal --save apollo-client vue-apollo

In your app code, create the Apollo client and install the Vue plugin before starting Vue:

import Vue from 'vue';
import ApolloClient, { createNetworkInterface, addTypename } from './apollo-client';
import VueApollo from 'vue-apollo';

// Create the apollo client
const apolloClient = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: 'http://localhost:8080/graphql', // GraphQL server
    transportBatching: true,
  queryTransformer: addTypename,

// Install the vue plugin
Vue.use(VueApollo, {

// Now you can start your Vue app

Then you can use apollo directly in your components:

import gql from 'graphql-tag';

// GraphQL query
const postsQuery = gql`
  query allPosts {
    posts {
      author {

// Component def
export default {
  components: {
  // Local state
  data: () => ({
    posts: [],
    loading: 0,
  // Apollo GraphQL
  apollo: {
    // Local state 'posts' data
    posts: {
      query: postsQuery,
      loadingKey: 'loading',

You can take a look at the hello world example.

Feel free to comment and make suggestions!


Thanks @akryum,
Handling graphql requests in vue-apollo much easier for me than in react containers and finally I figured out how to use apollo, thanks to your package and docs.

I tried vue-apollo-meteor stack and I have a few questions:

  1. How about publications? New apollo client supports it, is it possible to integrate this with a vue-apollo?
  2. How expensive is ‘pollInterval’ in vue-apollo requests? Is there much difference on server resources usage compared to pub-sub?
  3. It would be great to have an example with optimistic UI for meteor and vue-apollo. I see that the functional is there, but it’s quite difficult to connect it with mongo-meteor, based on an example with the plain js object in the docs. It would be nice to have something as this repo fully based on the vue-apollo-meteor example.


1 Like

This is planned. :slight_smile:

I think it depends on a lot of factors, but I would personally recommend pub/sub over polling.

1 Like

@akryum I want to say thanks for writing vue-apollo’s documentation. I’d struggled with Apollo for a long time (and still am) but the first time I got anything working even a little bit, it was from following your docs. Keep it up!

1 Like

Thank you very much for your kind message! Very happy to have helped you! :smile:

Hi, thanks for this awesome project @akryum ! Could this fully replace meteor-vue-tracker? Is there any news on the publications/subscriptions part. Would love to try it out. :slight_smile:

Apollo has its own real-time subscriptions system that you can already use today. :slight_smile:

1 Like