Nuxt URQL module

URQL client for Nuxt v3 and v4

• ✨  Release Notes
• 📖  Documentation

Features

• @urql/vue integration
• SSR exchange
• client customization

Quick Setup

Add @bicou/nuxt-urql dependency to your project

# Using pnpm
pnpm add -D @bicou/nuxt-urql graphql

# Using yarn
yarn add --dev @bicou/nuxt-urql graphql

# Using npm
npm install --save-dev @bicou/nuxt-urql graphql

Add @bicou/nuxt-urql to the modules section of nuxt.config.ts and configure the urql client with the endpoint url

export default defineNuxtConfig({
  modules: [
    '@bicou/nuxt-urql'
  ],
  urql: {
    endpoint: "http://myapi/graphql"
  }
})

That's it! You can now use Nuxt URQL module in your Nuxt app ✨

<template>
  <div>{{ data }}</div>
</template>

<script setup lang="ts">
const { data } = await useQuery({
  query: gql`
    query name {
      # ...
    }
  `,
});
</script>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch