{"id":18624,"library":"nuxt-http-client-hints","title":"nuxt-http-client-hints","description":"Nuxt module providing HTTP Client Hints for server-side browser, OS, device, network, and critical hints detection in Nuxt 3. Current version 0.0.2, weekly release pair. Only supported in Chromium-based browsers (Chrome, Edge, Chromium, Opera) due to draft spec status. Uses detect-browser-es internally. Grants access to Client Hints headers like Device-Memory, Save-Data, Downlink, ECT, RTT, and various Sec-CH-UA headers on the server via Nuxt plugins and composables.","status":"active","version":"0.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/userquin/nuxt-http-client-hints","tags":["javascript","HTTP Client Hints","User Agent Client Hints","Device Client Hints","Network Client Hints","Browser detection","nuxt module","typescript"],"install":[{"cmd":"npm install nuxt-http-client-hints","lang":"bash","label":"npm"},{"cmd":"yarn add nuxt-http-client-hints","lang":"bash","label":"yarn"},{"cmd":"pnpm add nuxt-http-client-hints","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core browser and OS detection logic for Client Hints","package":"detect-browser-es","optional":false}],"imports":[{"note":"The composable is auto-imported; explicit import uses the alias #http-client-hints when module is installed.","wrong":"import { useHttpClientHints } from 'nuxt-http-client-hints'","symbol":"useHttpClientHints","correct":"import { useHttpClientHints } from '#http-client-hints'"},{"note":"Available in version >= 0.0.1 for runtime config.","symbol":"defineHttpClientHintsConfig","correct":"import { defineHttpClientHintsConfig } from 'nuxt-http-client-hints'"},{"note":"Plugin is internal; use the module's Nuxt module setup instead of plugin directly.","wrong":"import { HttpClientHintsPlugin } from 'nuxt-http-client-hints'","symbol":"HttpClientHintsPlugin","correct":"import { HttpClientHintsPlugin } from 'nuxt-http-client-hints/runtime/plugin'"}],"quickstart":{"code":"// Module registration in nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-http-client-hints'],\n  httpClientHints: {\n    // Optional: configure client hints to use\n    deviceMemory: true,\n    downlink: true,\n    ect: true,\n    rtt: true,\n    secCHPrefersColorScheme: true,\n  }\n})\n\n// In any component/page\nconst hints = useHttpClientHints()\nconsole.log(hints.deviceMemory) // '4' | '2' | '1' | '0.5' | '0.25' | null\nconsole.log(hints.downlink) // e.g., '10' (Mbps)\nconsole.log(hints.ect) // '4g' | '3g' | '2g' | 'slow-2g' | null\nconsole.log(hints.rtt) // RTT in milliseconds\nconsole.log(hints.secCHPrefersColorScheme) // 'light' | 'dark' | null\n\n// Server-side usage via event\n// In server/api or server middleware\nexport default defineEventHandler(async (event) => {\n  // Access client hints from request headers\n  const deviceMemory = getRequestHeader(event, 'Device-Memory')\n  // ...\n})","lang":"typescript","description":"Shows Nuxt module registration and usage of useHttpClientHints composable and server-side header access."},"warnings":[{"fix":"Check for null values before using hints. Consider using a User-Agent fallback for non-Chromium browsers.","message":"HTTP Client Hints are only supported in Chromium-based browsers (Chrome, Edge, Chromium, Opera). Firefox, Safari, and other browsers send no Client Hints headers, resulting in null/undefined values.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Ensure only one version of detect-browser-es is in your lockfile.","message":"The module relies on the detect-browser-es package, which may have peer dependency conflicts if another version is installed.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Keep the module updated and monitor MDN or WICG spec changes.","message":"The Client Hints spec is still in draft and headers may change or be removed. Current implementation may break with future browser updates.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Pin to exact version and re-evaluate updates.","message":"Module version 0.0.2 has no stable release yet; breaking changes may occur between patches.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `nuxi prepare` or `nuxi generate` to generate the Nuxt types. Ensure the module is added to the modules array in nuxt.config.ts.","cause":"The module's auto-import pattern may not be recognized by TypeScript without proper Nuxt types generation.","error":"Cannot find module '#http-client-hints' or its corresponding type declarations."},{"fix":"Check for browser support: navigator.userAgentData?.getHighEntropyValues() as fallback. Or wrap usage in null checks.","cause":"Client Hints are not sent by the browser, so the composable returns null for all values.","error":"TypeError: Cannot read properties of null (reading 'deviceMemory')"},{"fix":"Upgrade to Nuxt 3 or use an alternative package.","cause":"This module only supports Nuxt 3 (v3.x).","error":"Nuxt module 'nuxt-http-client-hints' is not compatible with Nuxt 2."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}