{"id":17241206,"url":"https://github.com/userquin/nuxt-http-client-hints","last_synced_at":"2025-04-14T03:14:01.859Z","repository":{"id":257823775,"uuid":"871368007","full_name":"userquin/nuxt-http-client-hints","owner":"userquin","description":"Nuxt HTTP Client Hints","archived":false,"fork":false,"pushed_at":"2024-10-28T13:51:53.000Z","size":4156,"stargazers_count":24,"open_issues_count":2,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-14T03:13:49.295Z","etag":null,"topics":["detect-browser","detect-operating-system","device-hints","network-hints","nuxt","nuxt-module","user-agent-client-hints"],"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/userquin.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-10-11T20:17:34.000Z","updated_at":"2025-02-12T15:17:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"cad6f695-955c-4cd9-84ae-8c4a22c8e2b6","html_url":"https://github.com/userquin/nuxt-http-client-hints","commit_stats":null,"previous_names":["userquin/nuxt-http-client-hints"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/userquin%2Fnuxt-http-client-hints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/userquin%2Fnuxt-http-client-hints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/userquin%2Fnuxt-http-client-hints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/userquin%2Fnuxt-http-client-hints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/userquin","download_url":"https://codeload.github.com/userquin/nuxt-http-client-hints/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248813802,"owners_count":21165634,"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":["detect-browser","detect-operating-system","device-hints","network-hints","nuxt","nuxt-module","user-agent-client-hints"],"created_at":"2024-10-15T06:08:13.450Z","updated_at":"2025-04-14T03:14:01.838Z","avatar_url":"https://github.com/userquin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt HTTP Client Hints Module\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![JSDocs][jsdocs-src]][jsdocs-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nAccess and use HTTP Client Hints in your Nuxt application. Detect the client browser and the operating system on your server.\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/userquin/nuxt-http-client-hints)\n\n## Features\n\n- 🚀 Browser and Operating System detection: check [detect-browser-es](https://www.npmjs.com/package/detect-browser-es) for more information.\n- 💥 [Device Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints) detection\n- ⚡ [Network Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints) detection\n- ✨ [Critical Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints#critical_client_hints) detection\n\n## HTTP Client hints\n\n\u003e [!WARNING]\n\u003e The [HTTP Client hints headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) listed below are still in draft and only Chromium based browsers support them: Chrome, Edge, Chromium and Opera.\n\n\nThe module includes support for the following HTTP Client hints:\n- [Device Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints)\n  - [Device-Memory](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Device-Memory)\n- [Network Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#client_hints)\n  - [Save-Data](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data)\n  - [Downlink](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Downlink)\n  - [ECT](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ECT)\n  - [RTT](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/RTT)\n- [User Agent Hints](https://github.com/WICG/ua-client-hints)\n  - [Sec-CH](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH)\n  - [Sec-CH-UA](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA)\n  - [Sec-CH-UA-Mobile](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Mobile)\n  - [Sec-CH-UA-Platform](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Platform)\n  - [Sec-CH-UA-Arch](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Arch)\n  - [Sec-CH-UA-Model](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Model)\n  - [Sec-CH-UA-Platform-Version](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Platform-Version) \n  - [Sec-CH-UA-Bitness](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Bitness)\n- [Critical Client Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints#critical_client_hints)\n  - [Sec-CH-Width](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Width)\n  - [Sec-CH-DPR](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-DPR)\n  - [Sec-CH-Viewport-Width](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Viewport-Width)\n  - [Sec-CH-Viewport-Height](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Viewport-Height) \n  - [Sec-CH-Prefers-Color-Scheme](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme)\n  - [Sec-CH-Prefers-Reduced-Motion](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion)\n  - [Sec-CH-Prefers-Reduced-Transparency](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Transparency)\n\n\n## Quick Setup\n\nInstall the module to your Nuxt application with one command:\n\n```bash\nnpx nuxi module add nuxt-http-client-hints\n```\n\nAdd your configuration to your Nuxt config file:\n\n```js\nhttpClientHints: {\n  // Your configuration here\n}\n```\n\nAdd your client and server plugins to your Nuxt application and register the corresponding hooks with your configuration:\n\n```js\n// my-plugin.client.js\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.hook('http-client-hints:client-hints', (httpClientHints) =\u003e {\n    // Your client logic here\n  })\n})\n```\n\n```js\n// my-plugin.server.js\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.hook('http-client-hints:ssr-client-hints', (httpClientHints) =\u003e {\n    // Your server logic here\n  })\n})\n```\n\nYou use the httpClientHints object in your application to access the configuration:\n\n```html\n\u003c!-- SomeComponent.vue --\u003e\n\u003ctemplate\u003e\n  \u003cpre\u003e{{ $httpClientHints }}\"\u003c/pre\u003e\n\u003c/template\u003e\n```\n\nor in your modules, composables, or other plugins:\n```js\n// my-module.js\nconst clientHints = useNuxtApp().$httpClientHints\n```\n\nThat's it! You can now use HTTP Client Hints in your Nuxt app ✨\n\nYou can check the source code or the [JSDocs](https://www.jsdocs.io/package/nuxt-http-client-hints) for more information.\n\n## Contribution\n\n\u003cdetails\u003e\n  \u003csummary\u003eLocal development\u003c/summary\u003e\n  \n  ```bash\n  # Install dependencies\n  pnpm install\n  \n  # Generate type stubs\n  pnpm dev:prepare\n  \n  # Develop with the playground\n  pnpm dev\n  \n  # Build the playground\n  pnpm dev:build\n  \n  # Run ESLint\n  pnpm lint\n  \n  # Run Vitest\n  pnpm test\n  pnpm test:watch\n  ```\n\n\u003c/details\u003e\n\n## License\n\n[MIT](./LICENSE) License © 2024-PRESENT [Joaquín Sánchez](https://github.com/userquin)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-http-client-hints?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[npm-version-href]: https://npmjs.com/package/nuxt-http-client-hints\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-http-client-hints?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[npm-downloads-href]: https://npmjs.com/package/nuxt-http-client-hints\n[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[jsdocs-href]: https://www.jsdocs.io/package/nuxt-http-client-hints\n[license-src]: https://img.shields.io/github/license/userquin/nuxt-http-client-hints.svg?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[license-href]: https://github.com/userquin/nuxt-http-client-hints/blob/main/LICENSE\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuserquin%2Fnuxt-http-client-hints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuserquin%2Fnuxt-http-client-hints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuserquin%2Fnuxt-http-client-hints/lists"}