Nuxt Nation カンファレンス開催! 11月12日〜13日、ご参加ください。

nuxt-http-client-hints
nuxt-http-client-hints

Nuxt HTTP クライアントヒント

Nuxt HTTP クライアントヒントモジュール

npm versionnpm downloadsJSDocsLicenseNuxt

NuxtアプリケーションでHTTPクライアントヒントにアクセスして使用します。サーバー上でクライアントブラウザとオペレーティングシステムを検出します。

Open in StackBlitz

機能

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-現在 ホアキン・サンチェス