公式パッケージ · フレームワーク

リアルタイム WebSocket のための Nuxt モジュール

Nuxt 4、3、2 向けのモジュール。コンポーネントではコンポーザブルが自動インポートされ、サーバールートではサーバー用クライアントと認可ルートのヘルパーが使えます。

@hibira-io/nuxtnpm ↗GitHub ↗

• コンポーザブルは自動インポート。接続はブラウザでだけ開きます。
• サーバールートの useHibiraServer() で、イベントの送信とプライベート／プレゼンスチャンネルの署名ができます。
• ブラウザに届くのはアプリキーだけ。ID とシークレットはランタイム設定に残ります。

サインインすると、コード例にご自身のクラスターホストが入ります。 サインイン

1. インストール

   npx nuxi module add @hibira-io/nuxt

2. 設定する

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ['@hibira-io/nuxt'],
     hibira: {
       host: 'ws.hibira.io',
       authEndpoint: '/api/hibira/auth',
     },
   });
   
   // .env
   // NUXT_PUBLIC_HIBIRA_KEY=YOUR_APP_KEY
   // NUXT_HIBIRA_APP_ID=YOUR_APP_ID
   // NUXT_HIBIRA_SECRET=YOUR_APP_SECRET

3. 使う

   <script setup>
   const orders = ref([]);
   useEvent('orders', 'order.created', (order) => orders.value.unshift(order));
   const { count } = usePresence('presence-dashboard');
   </script>

始める前に

• アプリのシークレットは、アプリの作成時とシークレットのローテーション時に一度だけ表示されます。サーバーにだけ置き、ブラウザやゲームのビルドには入れないでください。
• Free プランでは、ページを読み込むすべてのオリジンをアプリの許可オリジンに登録してください（開発中は http://localhost:3000、その後は自分のドメイン）。"*" は有料プランで使えます。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。 無料でアカウントを作成 →