villus

A small and fast GraphQL client for Vue.js

⚡️ Fast

Small API footprint with tiny bundle size < 4kb to make your apps load faster

📦 Cache-Ready

Reasonable caching behavior out of the box which can be adjusted per query

👕 TypeScript

Written in TypeScript with Typed query Responses

😋 Two Flavors

Available as composable functions (hooks) or higher-order components

☢️ Reactive

Write reactive queries/variables with the composition API

🚟 Suspense API

Supports the <Suspense /> component API out of the box

Quick Start

First install villus:

yarn add villus graphql

# or npm

npm install villus graphql --save

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

villus supports both Vue 2 (with @vue/composition-api) and Vue 3

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.