{"id":16398068,"url":"https://github.com/becem-gharbi/nuxt-apollo","last_synced_at":"2025-04-06T07:33:52.119Z","repository":{"id":184698721,"uuid":"672344134","full_name":"becem-gharbi/nuxt-apollo","owner":"becem-gharbi","description":"Apollo client for Nuxt 3","archived":false,"fork":false,"pushed_at":"2024-06-17T16:00:25.000Z","size":724,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T06:23:59.001Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/becem-gharbi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-29T18:48:34.000Z","updated_at":"2024-06-17T16:00:30.000Z","dependencies_parsed_at":"2024-01-16T17:55:27.924Z","dependency_job_id":"605a737b-6f2b-40d4-bbf5-027139e2c794","html_url":"https://github.com/becem-gharbi/nuxt-apollo","commit_stats":null,"previous_names":["becem-gharbi/nuxt-apollo"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becem-gharbi%2Fnuxt-apollo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becem-gharbi%2Fnuxt-apollo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becem-gharbi%2Fnuxt-apollo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becem-gharbi%2Fnuxt-apollo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/becem-gharbi","download_url":"https://codeload.github.com/becem-gharbi/nuxt-apollo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247450590,"owners_count":20940934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T05:11:46.005Z","updated_at":"2025-04-06T07:33:52.091Z","avatar_url":"https://github.com/becem-gharbi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt Apollo\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nApollo Client for Nuxt 3.\n\n## Features\n\n- ✔️ Based on the latest [Vue Apollo](https://v4.apollo.vuejs.org/) plugin\n- ✔️ SSR support\n- ✔️ Graphql subscription via Websockets\n- ✔️ Authorization via built-in hooks\n- ✔️ Conditional import of Websockets dependencies\n\n## Quick Setup\n\n1. Add `nuxt-apollo` dependency to your project\n\n```bash\n# Using pnpm\npnpm add -D nuxt-apollo\n\n# Using yarn\nyarn add --dev nuxt-apollo\n\n# Using npm\nnpm install --save-dev nuxt-apollo\n```\n\n2. Add `nuxt-apollo` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\"nuxt-apollo\"],\n  apollo: {\n    httpEndpoint: \"\", // Required\n    wsEndpoint: \"\", // Optional\n    credentials: \"same-origin\",\n    proxyCookies: true,\n  },\n});\n```\n\nThat's it! You can now use Nuxt Apollo in your Nuxt app ✨\n\n## Usage\n\n### APIs\n\nAll [Vue Apollo](https://v4.apollo.vuejs.org/) composables are auto-imported. Please refer to [docs](https://v4.apollo.vuejs.org/api/use-query.html) for usage.\n\n### Authentication\n\n_HTTP_\n\nTwo options exists either via `Authorization` header which can be set via `apollo:http-auth` hook or via a cookie which can be configured via `credentials` option for client-side and `proxyCookies` for server-side [[docs]](https://www.apollographql.com/docs/react/networking/authentication).\n\n```js\nexport default defineNuxtPlugin({\n  hooks: {\n    \"apollo:http-auth\": (args) =\u003e {\n      args.authorization = \"Bearer access_token\";\n    },\n  },\n});\n```\n\n_Websockets_\n\nThe authentication for `useSubscription` can be handled via `apollo:ws-auth` hook. The current supported method is connectionParams [[docs]](https://www.apollographql.com/docs/react/data/subscriptions/#5-authenticate-over-websocket-optional).\n\n```js\nexport default defineNuxtPlugin({\n  hooks: {\n    \"apollo:ws-auth\": (args) =\u003e {\n      args.params = {};\n    },\n  },\n});\n```\n\n### GQL auto-completion\n\nIn order to benefit autocomplete suggestion when writing graphql queries, you can install [GraphQL: Language Feature Support](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) vscode extension.\nThen create `graphql.config.js` at root and paste the config object below.\n\n```js\nmodule.exports = {\n  projects: {\n    app: {\n      schema: [HTTP_ENDPOINT],\n      documents: [\n        \"./pages/**/*.vue\",\n        \"./components/**/*.vue\",\n        \"./composables/**/*.ts\",\n        \"./app.vue\",\n      ],\n    },\n  },\n};\n```\n\n### Codegen\n\nIn order to benefit automatically typed Queries, Mutations and, Subscriptions, you can install [Graphql Code Generator](https://the-guild.dev/graphql/codegen/docs/guides/react-vue).\n\n```bash\nnpm i -D @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher\n```\n\nThen create `codegen.ts` at root and paste the config object below.\n\n```js\nconst config = {\n  schema: HTTP_ENDPOINT,\n  documents: [\n    \"./pages/**/*.vue\",\n    \"./components/**/*.vue\",\n    \"./composables/**/*.ts\",\n    \"./app.vue\",\n  ],\n  ignoreNoDocuments: true,\n  generates: {\n    \"./gql/\": {\n      preset: \"client\",\n      config: {\n        useTypeImports: true,\n      },\n    },\n  },\n};\n\nexport default config;\n```\n\nFinally start GraphQL Code Generator in watch mode, this will type your GraphQL queries as you write them.\n\n```bash\nnpx graphql-codegen --watch\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate type stubs\nnpm run dev:prepare\n\n# Develop with the playground\nnpm run dev\n\n# Build the playground\nnpm run dev:build\n\n# Run ESLint\nnpm run lint\n\n# Run Vitest\nnpm run test\nnpm run test:watch\n\n# Release new version\nnpm run release\n```\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-apollo/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-apollo\n[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-apollo.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-apollo\n[license-src]: https://img.shields.io/npm/l/nuxt-apollo.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-apollo\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbecem-gharbi%2Fnuxt-apollo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbecem-gharbi%2Fnuxt-apollo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbecem-gharbi%2Fnuxt-apollo/lists"}