Nuxt HTTP クライアントヒントモジュール
NuxtアプリケーションでHTTPクライアントヒントにアクセスして使用します。サーバー上でクライアントブラウザとオペレーティングシステムを検出します。
機能
- 🚀 ブラウザとオペレーティングシステムの検出:詳細はdetect-browser-esをご覧ください。
- 💥 デバイスヒント検出
- ⚡ ネットワークヒント検出
- ✨ クリティカルヒント検出
HTTPクライアントヒント
!警告下記のHTTPクライアントヒントヘッダーはまだドラフト段階であり、Chromiumベースのブラウザ(Chrome、Edge、Chromium、Opera)のみがサポートしています。
このモジュールは以下のHTTPクライアントヒントをサポートしています。
クイックセットアップ
1つのコマンドでNuxtアプリケーションにモジュールをインストールします。
npx nuxi module add nuxt-http-client-hints
Nuxt設定ファイルに設定を追加します。
httpClientHints: {
// Your configuration here
}
Nuxtアプリケーションにクライアントとサーバーのプラグインを追加し、対応するフックを設定で登録します。
// 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>
または、モジュール、コンポーザブル、その他のプラグインで使用します。
// my-module.js
const clientHints = useNuxtApp().$httpClientHints
これで完了です!NuxtアプリでHTTPクライアントヒントを使用できるようになりました ✨
詳細については、ソースコードまたは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
ライセンス
MIT ライセンス © 2024-現在 ホアキン・サンチェス