Skip to content

Installation ​

Compatibility ​

  • Vue 3
  • Apollo Client 3

Note: @vue/apollo-composable supports Vue 2 thanks to Vue Demi.

Vue CLI Plugin ​

⚠️ The plugin is not updated to support the new packages yet.

Manual installation ​

shell
npm install --save graphql graphql-tag @apollo/client
npm install --save graphql graphql-tag @apollo/client

Or:

shell
yarn add graphql graphql-tag @apollo/client
yarn add graphql graphql-tag @apollo/client

In your app, create an ApolloClient instance:

js
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

// 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,
})
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

// 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,
})

Continue installation in Next Steps.

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:

js
// 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',
    ],
  },
}
// 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:

json
{
  "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
      }
    }
  }
}
{
  "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:

Released under the MIT License.