Nuxt HTTP Client Hints 模組

在您的 Nuxt 應用程式中存取和使用 HTTP Client Hints。在伺服器上偵測客戶端瀏覽器和作業系統。

功能

🚀 瀏覽器和作業系統偵測：查看 detect-browser-es 以取得更多資訊。
💥 裝置提示偵測
⚡ 網路提示偵測
✨ 重要提示偵測

HTTP Client hints

!警告以下列出的 HTTP Client hints 標頭仍在草案中，且僅有基於 Chromium 的瀏覽器支援它們：Chrome、Edge、Chromium 和 Opera。

此模組包含對以下 HTTP Client hints 的支援

快速設定

使用一個命令將模組安裝到您的 Nuxt 應用程式

npx nuxi module add nuxt-http-client-hints

將您的配置新增到您的 Nuxt 設定檔

httpClientHints: {
  // Your configuration here
}

將您的客戶端和伺服器外掛程式新增到您的 Nuxt 應用程式，並使用您的配置註冊相應的 hook

// 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
  })
})

您可以在應用程式中使用 httpClientHints 物件來存取配置

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

或在您的模組、composable 或其他外掛程式中使用

// my-module.js
const clientHints = useNuxtApp().$httpClientHints

就是這樣！您現在可以在 Nuxt 應用程式中使用 HTTP Client Hints 了 ✨

您可以查看原始碼或 JSDocs 以取得更多資訊。

貢獻

本地開發

# 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

nuxt-http-client-hints

Nuxt HTTP Client Hints 模組

功能

HTTP Client hints

快速設定

貢獻

授權