Nuxt HTTP Client Hints
npm install nuxt-http-client-hints[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Access and use HTTP Client Hints in your Nuxt application. Detect the client browser and the operating system on your server.

- 🚀 Browser and Operating System detection: check detect-browser-es for more information.
- 💥 Device Hints detection
- âš¡ Network Hints detection
- ✨ Critical Hints detection
> [!WARNING]
> The HTTP Client hints headers listed below are still in draft and only Chromium based browsers support them: Chrome, Edge, Chromium and Opera.
The module includes support for the following HTTP Client hints:
- Device Hints
- Device-Memory
- Network Hints
- Save-Data
- Downlink
- ECT
- RTT
- User Agent Hints
- Sec-CH
- Sec-CH-UA
- Sec-CH-UA-Mobile
- Sec-CH-UA-Platform
- Sec-CH-UA-Arch
- Sec-CH-UA-Model
- Sec-CH-UA-Platform-Version
- Sec-CH-UA-Bitness
- Critical Client Hints
- Sec-CH-Width
- Sec-CH-DPR
- Sec-CH-Viewport-Width
- Sec-CH-Viewport-Height
- Sec-CH-Prefers-Color-Scheme
- Sec-CH-Prefers-Reduced-Motion
- Sec-CH-Prefers-Reduced-Transparency
Install the module to your Nuxt application with one command:
``bash`
npx nuxi module add nuxt-http-client-hints
Add your configuration to your Nuxt config file:
`js`
httpClientHints: {
// Your configuration here
}
Add your client and server plugins to your Nuxt application and register the corresponding hooks with your configuration:
`js`
// my-plugin.client.js
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('http-client-hints:client-hints', (httpClientHints) => {
// Your client logic here
})
})
`js`
// my-plugin.server.js
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('http-client-hints:ssr-client-hints', (httpClientHints) => {
// Your server logic here
})
})
You use the httpClientHints object in your application to access the configuration:
`html`
{{ $httpClientHints }}"
or in your modules, composables, or other plugins:
`js`
// my-module.js
const clientHints = useNuxtApp().$httpClientHints
That's it! You can now use HTTP Client Hints in your Nuxt app ✨
You can check the source code or the JSDocs for more information.
Local development
`bash``
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Develop with the playground
pnpm dev
# Build the playground
pnpm dev:build
# Run ESLint
pnpm lint
# Run Vitest
pnpm test
pnpm test:watch
MIT License © 2024-PRESENT JoaquÃn Sánchez
[npm-version-src]: https://img.shields.io/npm/v/nuxt-http-client-hints?style=flat&colorA=18181B&colorB=F0DB4F
[npm-version-href]: https://npmjs.com/package/nuxt-http-client-hints
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-http-client-hints?style=flat&colorA=18181B&colorB=F0DB4F
[npm-downloads-href]: https://npmjs.com/package/nuxt-http-client-hints
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=18181B&colorB=F0DB4F
[jsdocs-href]: https://www.jsdocs.io/package/nuxt-http-client-hints
[license-src]: https://img.shields.io/github/license/userquin/nuxt-http-client-hints.svg?style=flat&colorA=18181B&colorB=F0DB4F
[license-href]: https://github.com/userquin/nuxt-http-client-hints/blob/main/LICENSE
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com