Nuxt URQL module
URQL client for Nuxt v3 and v4
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