Nuxt HTTP Client Hints Module

Access and use HTTP Client Hints in your Nuxt application. Detect the client browser and the operating system on your server.

Features

• 🚀 Browser and Operating System detection: check detect-browser-es for more information.
• 💥 Device Hints detection
• ⚡ Network Hints detection
• ✨ Critical Hints detection

HTTP Client hints

[!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

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-http-client-hints

Add your configuration to your Nuxt config file:

httpClientHints: {
  // Your configuration here
}

Add your client and server plugins to your Nuxt application and register the corresponding hooks with your configuration:

// my-plugin.client.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('http-client-hints:client-hints', (httpClientHints) => {
    // Your client logic here
  })
})

// 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:

<!-- SomeComponent.vue -->
<template>
  <pre>{{ $httpClientHints }}"</pre>
</template>

or in your modules, composables, or other plugins:

// 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.

Contribution

  # 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

License

MIT License © 2024-PRESENT Joaquín Sánchez