Vue 3 앱에 댓글 추가하기
이것은 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사용법
댓글 위젯
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에서는 게시물 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'}" />Account Region (ATTENTION: EU Customers)
계정이 EU에 있는 경우 위젯 구성에서 region = 'eu'로 설정하세요. 예:
<FastComments v-bind:config="{tenantId: 'demo', url: 'https://example.com/somepage', urlId: 'some-page-id', region: 'eu'}" />그렇지 않으면 region을 정의할 필요가 없습니다.
프로덕션 환경
콜백 등을 전달하는 경우 config를 인라인으로 정의하고 싶지 않을 것입니다. 대신,
config를 computed()를 통해 정의해야 합니다. 그렇지 않으면 콜백 등이 호출될 때마다 위젯 전체가 다시 렌더링됩니다.
모든 위젯 및 문서
로컬 문서 실행:
npm run serve유지보수 상태
이 컴포넌트들은 저희 핵심 VanillaJS 컴포넌트들을 감싸는 래퍼입니다. 저희는 이 컴포넌트들을 이 라이브러리를 배포하지 않고도 자동으로 업데이트(버그 수정, 기능 추가)할 수 있으므로, 이 라이브러리가 당분간 배포되지 않을 수 있다고 해서 FastComments가 활발히 개발되고 있지 않다는 뜻은 아닙니다! 업데이트는 저희 블로그에서 확인하세요. 하위 호환성을 깨는 API 변경이나 기능은 이 라이브러리의 버전 증가 없이 기반 코어 라이브러리에 절대 반영되지 않습니다.
FastComments
FastComments
이 문서에는 FastComments를 Vue3와 함께 사용하는 방법에 대한 몇 가지 예제가 포함되어 있습니다.
전체 구성 옵션 목록은 fastcomments-typescript 및 당사 문서를 참조하세요.
도움이 필요하신가요?
Vue 3 라이브러리 사용 중 문제가 발생하거나 질문이 있는 경우, 다음을 이용하세요:
기여
기여는 환영합니다! 기여 지침은 GitHub 저장소를 방문하세요.