hero

Villus

A small and fast GraphQL client for Vue.js

Get Started →

Declarative

Use minimal Vue.js components to work with GraphQL

Fast

A lightweight footprint.

Caching

Reasonable caching behavior out of the box.

TypeScript

Everything is written in TypeScript.

Quick Start

First install villus:

yarn add villus@next graphql

# or npm

npm install villus@next graphql --save

If you are using Vue 2 with the @vue/composition-api don't use the next tag.

You can now use it with either the new Vue composition API or higher order components:

Usage

Configure the GraphQL client for your root component:

import { useClient } from 'villus';

export default {
  name: 'App',
  setup() {
    useClient({
      url: 'http://localhost:3002/graphql'
    });
  }
};

Then you can use useQuery in any child component:

<template>
  <div>
    <div v-if="data">
      <pre>{{ data }}</pre>
    </div>
  </div>
</template>

<script>
import { useQuery } from 'villus';

export default {
  setup() {
    const { data } = useQuery({
      query: '{ posts { title } }'
    });

    return { data };
  }
};
</script>

There is also the higher-order component flavor if you prefer to use them instead. Check the docs for more examples and details.