https://github.com/gbicou/nuxt-urql
Nuxt URQL module
https://github.com/gbicou/nuxt-urql
graphql nuxt nuxt-module urql
Last synced: about 1 year ago
JSON representation
Nuxt URQL module
- Host: GitHub
- URL: https://github.com/gbicou/nuxt-urql
- Owner: gbicou
- License: mit
- Created: 2023-02-01T15:55:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-14T09:50:14.000Z (about 1 year ago)
- Last Synced: 2025-06-14T10:33:51.029Z (about 1 year ago)
- Topics: graphql, nuxt, nuxt-module, urql
- Language: TypeScript
- Homepage: https://nuxt-urql-docs.vercel.app
- Size: 5.23 MB
- Stars: 19
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt URQL module
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
> URQL client for Nuxt v3
- [✨ Release Notes](/CHANGELOG.md)
- [📖 Documentation](https://nuxt-urql-docs.vercel.app/)
## Features
- @urql/vue integration
- SSR exchange
- client customization
## Quick Setup
Add `@bicou/nuxt-urql` dependency to your project
```bash
# 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
```js
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 ✨
```vue
{{ data }}
const { data } = await useQuery({
query: gql`
query name {
# ...
}
`,
});
```
## Development
```bash
# 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
```
[npm-version-src]: https://img.shields.io/npm/v/@bicou/nuxt-urql/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@bicou/nuxt-urql
[npm-downloads-src]: https://img.shields.io/npm/dm/@bicou/nuxt-urql.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@bicou/nuxt-urql
[license-src]: https://img.shields.io/npm/l/@bicou/nuxt-urql.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@bicou/nuxt-urql
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com