https://github.com/storipress/apollo-vue-devtools

Integrate GraphQL Apollo with Vue Devtools!
https://github.com/storipress/apollo-vue-devtools

apollo apollo-client apollo-server debugging devtool-extension devtools graphql vue vue-devtools vuejs vuejs3

Last synced: 6 days ago
JSON representation

Integrate GraphQL Apollo with Vue Devtools!

• Host: GitHub
• URL: https://github.com/storipress/apollo-vue-devtools
• Owner: storipress
• License: mit
• Created: 2022-02-27T09:31:36.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2025-12-27T21:50:53.000Z (21 days ago)
• Last Synced: 2025-12-28T12:48:37.945Z (20 days ago)
• Topics: apollo, apollo-client, apollo-server, debugging, devtool-extension, devtools, graphql, vue, vue-devtools, vuejs, vuejs3
• Language: TypeScript
• Homepage: https://storipress.com
• Size: 8.94 MB
• Stars: 20
• Watchers: 0
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - apollo-vue-devtools - Apollo integration for Vue-Devtools to inspect GraphQL queries in the vue-devtools timeline (Components & Libraries / Utilities)
• fucking-awesome-vue - apollo-vue-devtools - Apollo integration for Vue-Devtools to inspect GraphQL queries in the vue-devtools timeline (Components & Libraries / Utilities)
• awesome-vue - apollo-vue-devtools - Apollo integration for Vue-Devtools to inspect GraphQL queries in the vue-devtools timeline (Components & Libraries / Utilities)

README

          
# apollo-vue-devtool: Integrate Apollo with Vue Devtools



    

    

 


![](./example/src/assets/timeline.png)

## Usage

1. Add the plugin to your Vue project:

```js

import { createApp } from 'vue'

import Plugin from '@storipress/apollo-vue-devtool'

import App from './App.vue'

const app = createApp(App)

app.use(Plugin)

app.mount('#app')

```

2. Add the DebugLink to your Apollo client:

```js

import { DebugLink } from '@storipress/apollo-vue-devtool'

import { ApolloClient, ApolloLink, HttpLink } from '@apollo/client/client'

const client = new ApolloClient({

  link: ApolloLink.from([

    new DebugLink(),

    new HttpLink({

      uri: 'http://example.com/graphql',

    }),

  ]),

})

```

3. Now open Vue Devtools and you'll see your queries in the timeline!

## Installation

### NPM

```shell

$ npm install --save-dev @storipress/apollo-vue-devtool

```

### Yarn

```shell

$ yarn add --dev @storipress/apollo-vue-devtool

```