# Installation

# Vue CLI Plugin

I made a plugin for vue-cli so you can add Apollo (with an optional GraphQL server!) in literally two minutes! ✨🚀

In your vue-cli 3 project:

vue add apollo

Then you can skip to next section: Basic Usage.

More info

# Manual installation

You can either use Apollo Boost or Apollo Client directly (more configuration work).

# Apollo Boost

Apollo Boost is a zero-config way to start using Apollo Client. It includes some sensible defaults, such as our recommended InMemoryCache and HttpLink, which come configured for you with our recommended settings and it's perfect for starting to develop fast.

Install it alongside vue-apollo and graphql:

npm install --save graphql apollo-boost

Or:

yarn add graphql apollo-boost

In your app, create an ApolloClient instance:

import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  // You should use an absolute URL here
  uri: 'https://api.graphcms.com/simple/v1/awesomeTalksClone'
})

# Apollo client full configuration

If you want some more fine grained control install these packages instead of apollo-boost:

npm install --save graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

Or:

yarn add graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

In your app, create an ApolloClient instance:

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

// HTTP connection to the API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:3020/graphql',
})

// Cache implementation
const cache = new InMemoryCache()

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

# IDE integration

# Visual Studio Code

If you are using VS Code, it's recommended to install the Apollo GraphQL extension.

Then configure it by creating a apollo.config.js file in the root folder of the Vue project:

// apollo.config.js
module.exports = {
  client: {
    service: {
      name: 'my-app',
      // URL to the GraphQL API
      url: 'http://localhost:3000/graphql',
    },
    // Files processed by the extension
    includes: [
      'src/**/*.vue',
      'src/**/*.js',
    ],
  },
}

# Webstorm

If you are using Webstorm, it's recommended to install the JS GraphQL extension.

Then configure it by creating a .graphqlconfig file in the root folder of the Vue project:

{
  "name": "Untitled GraphQL Schema",
  "schemaPath": "./path/to/schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://url/to/the/graphql/api",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}

# Next steps

Continue with one of those guides: