Add Comments to Your Vue 3 App
これは FastComments の公式 Vue 3 ライブラリです。
あなたの Vue アプリにライブコメント、チャット、レビューウィジェットを埋め込みます。
リポジトリ
ライブデモ 
すべてのウィジェットをライブでお試しください: https://fastcomments.com/commenting-system-for-vue.
ライブショーケース
パブリックな demo テナントに対してローカルで実行されているすべてのウィジェットとフローを確認するには、リポジトリをクローンして次を実行してください:
npm install
npm run devショーケースのエントリーポイントは src/App.vue と index.html にあります — 各ウィジェット/フローは同じアプリ内でレンダリングされており、これをコピーしてあなたの Vue 3 プロジェクトに組み込むことができます。
インストール
NPM
npm install --save fastcomments-vue-nextYarn
yarn add fastcomments-vue-next使い方
コメントウィジェット
The FastCommentsVueNext componentには、ライブの FastComments コメントウィジェットが含まれます。
下の "demo" をあなたの "tenantId" に置き換えてください - FastComments 管理画面で ここ から取得できます。
このウィジェットは多数のオプションをサポートしています - FastCommentsConfig は ここ を参照してください。
<template>
<FastComments v-bind:config="{tenantId: 'demo'}" />
</template>
<script>
import { FastComments } from 'fastcomments-vue-next'
export default {
name: 'FastCommentsExample',
components: {
FastComments
}
}
</script>現在のページを更新する（SPA の例）
FastCommentsでは、記事のIDやコメントが紐付くページを、URLまたはIDのどちらでもあり得るため「URL ID」と呼びます。 URL IDは次のように定義します。コンポーネントはconfigオブジェクトの変更を監視しており、リロードされるため、URL IDを更新できます。
<FastComments v-bind:config="{tenantId: 'demo', url: 'https://example.com/somepage', urlId: 'some-page-id'}" />アカウントのリージョン（注意：EUのお客様）
アカウントがEUに所在する場合は、ウィジェットの設定で region = 'eu' を設定してください。例：
<FastComments v-bind:config="{tenantId: 'demo', url: 'https://example.com/somepage', urlId: 'some-page-id', region: 'eu'}" />それ以外の場合は、region を定義する必要はありません。
本番環境での運用
コールバックなどを渡す場合、設定をインラインで定義するのはおそらく望ましくありません。代わりに、
設定を computed() 経由で定義してください。そうしないと、コールバックなどが呼び出されるたびにウィジェット全体が再レンダリングされます。
すべてのウィジェットとドキュメント
ローカルのドキュメントを起動する:
npm run serveメンテナンス状況
これらのコンポーネントは、当社のコアの VanillaJS コンポーネントをラップしたものです。これらのコンポーネントは、このライブラリを公開せずに自動的に更新（バグ修正や機能追加）することができるため、しばらく公開されないことがあっても FastComments がアクティブに開発されていないというわけではありません！更新情報については、当社のブログ をご覧ください。破壊的な API の変更や新機能は、このライブラリでバージョンを上げない限り、基盤となるコアライブラリに反映されることは決してありません。
FastComments
FastComments
このドキュメントには、Vue3でFastCommentsを使用する方法のいくつかの例が含まれています。
設定オプションの完全な一覧については、fastcomments-typescript と 当社のドキュメント を参照してください。
ヘルプが必要ですか？
Vue 3 ライブラリに関して問題が発生したり質問がある場合は、次のいずれかを行ってください：
貢献
貢献は歓迎します！貢献ガイドラインについては、GitHub リポジトリ をご覧ください。