Skip to content

gbicou/nuxt-urql

Repository files navigation

Nuxt URQL module

npm version npm downloads License Nuxt

URQL client for Nuxt v3

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