Nuxt HTTP Client Hints 模組

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

功能

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

HTTP Client hints

!WARNING HTTP Client hints 標頭仍為草稿，且僅 Chromium based 瀏覽器支援它們：Chrome、Edge、Chromium 和 Opera。

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

快速設定

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

npx nuxi module add nuxt-http-client-hints

將您的設定新增到您的 Nuxt config 檔案

httpClientHints: {
  // Your configuration here
}

將您的用戶端和伺服器外掛程式新增到您的 Nuxt 應用程式，並使用您的設定註冊相應的 hooks

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

或在您的模組、composables 或其他外掛程式中

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

快速設定

貢獻

許可證