Add Comments to Your Vue 3 App
Это официальная библиотека Vue 3 для FastComments.
Встраивайте виджеты живых комментариев, чата и отзывов в ваше приложение на 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Использование
Виджет комментариев
Компонент FastCommentsVueNext содержит живой виджет комментариев 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 идентификатор статьи или страницы, к которой привязаны комментарии, называется URL ID, так как это может быть URL или ID. Определите URL ID следующим образом. Компонент отслеживает изменения объекта config и будет перезагружать содержимое, поэтому вы можете обновлять URL ID.
<FastComments v-bind:config="{tenantId: 'demo', url: 'https://example.com/somepage', urlId: 'some-page-id'}" />Регион аккаунта (ВНИМАНИЕ: клиенты из ЕС)
Если ваш аккаунт находится в ЕС, установите region = 'eu' в конфигурации виджета, например:
<FastComments v-bind:config="{tenantId: 'demo', url: 'https://example.com/somepage', urlId: 'some-page-id', region: 'eu'}" />В противном случае вам не нужно задавать region.
В рабочей среде
Вы, вероятно, не захотите определять config inline, если вы передаёте callbacks и т.д. Вместо этого вы захотите определить
config через computed(), иначе каждый раз, когда ваш callback и т.д. будет вызван, весь widget будет перерендериваться.
Все виджеты и документация
Запустите локальную документацию:
npm run serveСтатус обслуживания
Эти компоненты являются обёртками вокруг наших основных компонентов на VanillaJS. Мы можем автоматически обновлять эти компоненты (исправлять ошибки, добавлять функции) без публикации этой библиотеки, поэтому хотя она может не публиковаться какое-то время, это не означает, что FastComments не находится в активной разработке! Не стесняйтесь заглянуть в наш блог для обновлений. Несовместимые изменения API или новые возможности никогда не будут внедрены в базовую библиотеку без увеличения версии в этой библиотеке.
FastComments
FastComments
Эта документация содержит несколько примеров того, как использовать FastComments с Vue3.
Для полного списка параметров конфигурации см. fastcomments-typescript и нашу документацию.
Нужна помощь?
Если вы столкнулись с проблемами или у вас есть вопросы по библиотеке Vue 3, пожалуйста:
Вклад
Мы приветствуем ваш вклад! Пожалуйста, посетите репозиторий на GitHub для получения инструкций по внесению вклада.