Vue Gitalk

A plugin that simplifies adding Gitalk comments to Vue apps.

Installation

# For npm
$ npm install vue-gitalk
# For yarn
$ yarn add vue-gitalk

Usage

Add the following code to your main.js

import  'vue-gitalk/dist/vue-gitalk.css';
import  Gitalk  from  'vue-gitalk';

Vue.use(Gitalk, {
  ... //Global gitalk config
});

Then simply add the following line to your Vue files.

<Gitalk :config="{
  ... // Component gitalk config
}" />

Note

• All the gitalk config options can be used in the Global and Component configs.
• If same config option is provided in Global and Component. Component config option will be considered.

Config Options

• clientID String

  Required. GitHub Application Client ID.

• clientSecret String

  Required. GitHub Application Client Secret.

• repo String

  Required. GitHub repository.

• owner String

  Required. GitHub repository owner. Can be personal user or organization.

• admin Array

  Required. GitHub repository owner and collaborators. (Users who having write access to this repository)

• id String

  Default: location.href.

  The unique id of the page. Length must less than 50.

• number Number

  Default: -1.

  The issue ID of the page, if the number attribute is not defined, issue will be located using id.

• labels Array

  Default: ['Gitalk'].

  GitHub issue labels.

• title String

  Default: document.title.

  GitHub issue title.

• body String

  Default: location.href + header.meta[description].

  GitHub issue body.

• language String

  Default: navigator.language || navigator.userLanguage.

  Localization language key, en, zh-CN and zh-TW are currently available.

• perPage Number

  Default: 10.

  Pagination size, with maximum 100.

• distractionFreeMode Boolean

  Default: false.

  Facebook-like distraction free mode.

• pagerDirection String

  Default: 'last'

  Comment sorting direction, available values are last and first.

• createIssueManually Boolean

  Default: false.

  By default, Gitalk will create a corresponding github issue for your every single page automatically when the logined user is belong to the admin users. You can create it manually by setting this option to true.

• proxy String

  Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token.

  GitHub oauth request reverse proxy for CORS. Why need this?

• flipMoveOptions Object

  Default:

    {
      staggerDelayBy: 150,
      appearAnimation: 'accordionVertical',
      enterAnimation: 'accordionVertical',
      leaveAnimation: 'accordionVertical',
    }

  Comment list animation. Reference

• enableHotKey Boolean

  Default: true.

  Enable hot key (cmd|ctrl + enter) submit comment.

License (MIT)

Open LICENSE file for more info