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:
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.
Local development
# 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