We now recommend using the client-preset package for a better developer experience and smaller impact on bundle size.

Get started on our “React/Vue” guide.

TypeScript Vue Apollo Composition API

Package name	Weekly Downloads	Version	License	Updated
`@graphql-codegen/typescript-vue-apollo`				Apr 19th, 2026

Installation

npm i -D @graphql-codegen/typescript-vue-apollo

pnpm add -D @graphql-codegen/typescript-vue-apollo

yarn add --dev @graphql-codegen/typescript-vue-apollo

bun add --dev @graphql-codegen/typescript-vue-apollo

⚠️

Usage Requirements In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query / mutation / subscription and fragment) set as documents: … in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won’t see any change in the generated output.

This plugin generates

Config API Reference

`withCompositionFunctions`

type: boolean default: true

Customized the output by enabling/disabling the generated Vue composition functions.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo'],
       config: {
         withCompositionFunctions: true
       },
     },
   },
 };
 export default config;

`vueApolloComposableImportFrom`

type: string default: (empty)

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo'],
       config: {
         vueApolloComposableImportFrom: 'vue'
       },
     },
   },
 };
 export default config;

`vueCompositionApiImportFrom`

type: string default: (empty)

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo'],
       config: {
         vueCompositionApiImportFrom: 'vue'
       },
     },
   },
 };
 export default config;

`addDocBlocks`

type: boolean default: true

Allows you to enable/disable the generation of docblocks in generated code. Some IDE’s (like VSCode) add extra inline information with docblocks, you can disable this feature if your preferred IDE does not.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo'],
       config: {
         addDocBlocks: true
       },
     },
   },
 };
 export default config;

`clientId`

type: string default: null

Allows you to set the clientId in the composition functions when using multiple apollo clients.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo'],
       config: {
         clientId: 'customClient'
       },
     },
   },
 };
 export default config;

Examples

The examples below use Vue 2 with the (composition api plugin).

Queries

Using the generated query code.

Basic query

For the given input:

query Message {
  feed {
    id
  }
}

We can use the generated code like this:

<template>
  <div>
    <div v-if="loading">Loading…</div>
    <div v-else>{{ result.feed.id }}</div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import { useMessageQuery } from '../generated/graphqlOperations'
 
export default defineComponent({
  setup() {
    const { result, loading } = useMessageQuery()
    return { result, loading }
  }
})
</script>

Select a single property with useResult and add an error message

For the given input:

query allAccounts {
  accounts {
    accountID
    givenName
    age
  }
}

We can use the generated code with useResult like this:

<template>
  <div>
    <div v-if="loading">Loading…</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else-if="allAccounts">
      <div v-for="account in allAccounts" :key="account.accountID">
        {{ account.accountID }} {{ account.givenName }} {{ account.age }}
      </div>
    </div>
  </div>
</template>
 
<script lang="ts">
import { useResult } from '@vue/apollo-composable'
import { defineComponent } from '@vue/composition-api'
import { useAllAccountsQuery } from '../generated/graphqlOperations'
 
export default defineComponent({
  setup() {
    const { result, loading, error } = useAllAccountsQuery()
    // Only select the property 'accounts' for use in the template
    const allAccounts = useResult(result, null, data => data.accounts)
    return { allAccounts, loading, error }
  }
})
</script>

Use an options object

Every useXxxxQuery can receive an options object to define query specific settings. To demonstrate the use of an options object we will try to only execute a query once a condition is met.

The ref isAuthenticated represents a boolean value that is set to true once the user successfully logged in to the app. To retrieve the user’s application settings we can only execute the graphql query once the user is logged on (and the ref isAuthenticated is set to true). Setting this ref is done in another part of the app and is used as a simple example.

For the given input:

query {
  viewer {
    preference {
      language
      darkMode
    }
  }
}

Within the options object is a property enabled that defines if a query is enabled or disabled. To only execute the query when isAuthenticated is true we set the property enabled equal to the ref isAuthenticated:

<script lang="ts">
import { isAuthenticated } from 'src/store/authentication'
import { defineComponent, watchEffect } from '@vue/composition-api'
import { useViewerQuery } from '../generated/graphqlOperations'
 
export default defineComponent({
  setup(_, { root }) {
    // our imported ref:
    // const isAuthenticated = ref(false)
    const { result, loading, error } = useViewerQuery(() => ({
      enabled: isAuthenticated.value
    }))
 
    return {
      loading,
      error,
      result
    }
  }
})
</script>

validation-schema vue-apollo-smart-ops