{"id":16232446,"url":"https://github.com/nishantwrp/vue-gitalk","last_synced_at":"2025-06-17T01:33:59.982Z","repository":{"id":38255576,"uuid":"268289347","full_name":"nishantwrp/vue-gitalk","owner":"nishantwrp","description":"A plugin that simplifies adding Gitalk comments to Vue.","archived":false,"fork":false,"pushed_at":"2024-11-19T21:52:31.000Z","size":865,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-28T19:20:15.688Z","etag":null,"topics":["comment-system","gitalk","vue","vue-plugin"],"latest_commit_sha":null,"homepage":"https://yarnpkg.com/package/vue-gitalk","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nishantwrp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-31T13:47:06.000Z","updated_at":"2024-11-19T21:52:32.000Z","dependencies_parsed_at":"2023-01-25T18:00:48.742Z","dependency_job_id":"0777b13f-a8eb-450e-b179-d59c6259f055","html_url":"https://github.com/nishantwrp/vue-gitalk","commit_stats":{"total_commits":48,"total_committers":2,"mean_commits":24.0,"dds":"0.27083333333333337","last_synced_commit":"1c104a6ed9e0eee7ad2de937558e625f0cd60d62"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishantwrp%2Fvue-gitalk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishantwrp%2Fvue-gitalk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishantwrp%2Fvue-gitalk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nishantwrp%2Fvue-gitalk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nishantwrp","download_url":"https://codeload.github.com/nishantwrp/vue-gitalk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243997107,"owners_count":20380980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comment-system","gitalk","vue","vue-plugin"],"created_at":"2024-10-10T13:09:02.411Z","updated_at":"2025-03-19T14:31:12.699Z","avatar_url":"https://github.com/nishantwrp.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Gitalk\n\u003ca href=\"https://npmjs.com/package/vue-gitalk\"\u003e\u003cimg src=\"https://badge.fury.io/js/vue-gitalk.svg\" alt=\"npm version\"\u003e\u003c/a\u003e \u003cimg src=\"https://badgen.net/github/license/nishantwrp/vue-gitalk\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/vue-gitalk\"\u003e\u003ca title=\"MadeWithVueJs.com Shield\" href=\"https://madewithvuejs.com/p/vue-gitalk/shield-link\"\u003e \u003cimg src=\"https://madewithvuejs.com/storage/repo-shields/2508-shield.svg\"/\u003e\u003c/a\u003e\n\nA plugin that simplifies adding [Gitalk](https://github.com/gitalk/gitalk) comments to Vue apps.\n\n\n## Installation\n\n```\n# For npm\n$ npm install vue-gitalk\n# For yarn\n$ yarn add vue-gitalk\n```\n\n## Usage\n\nAdd the following code to your `main.js`\n\n```js\nimport  'vue-gitalk/dist/vue-gitalk.css';\nimport  Gitalk  from  'vue-gitalk';\n\nVue.use(Gitalk, {\n  ... //Global gitalk config\n});\n```\nThen simply add the following line to your Vue files.\n```html\n\u003cGitalk :config=\"{\n  ... // Component gitalk config\n}\" /\u003e\n```\n## Note\n- All the gitalk config options can be used in the `Global` and `Component` configs.\n- If same config option is provided in `Global` and `Component`. `Component` config option will be considered.\n\n\n## Config Options\n\n- **clientID** `String`\n\n  **Required**. GitHub Application Client ID.\n\n- **clientSecret** `String`\n\n  **Required**. GitHub Application Client Secret.\n\n- **repo** `String`\n\n  **Required**. GitHub repository.\n\n- **owner** `String`\n\n  **Required**. GitHub repository owner. Can be personal user or organization.\n\n- **admin** `Array`\n\n  **Required**. GitHub repository owner and collaborators. (Users who having write access to this repository)\n\n- **id** `String`\n\n  Default: `location.href`.\n\n  The unique id of the page. Length must less than 50.\n\n- **number** `Number`\n\n  Default: `-1`.\n\n  The issue ID of the page, if the `number` attribute is not defined, issue will be located using `id`.\n\n- **labels** `Array`\n\n  Default: `['Gitalk']`.\n\n  GitHub issue labels.\n\n- **title** `String`\n\n  Default: `document.title`.\n\n  GitHub issue title.\n\n- **body** `String`\n\n  Default: `location.href + header.meta[description]`.\n\n  GitHub issue body.\n\n- **language** `String`\n\n  Default: `navigator.language || navigator.userLanguage`.\n\n  Localization language key, `en`, `zh-CN` and `zh-TW` are currently available.\n\n- **perPage** `Number`\n\n  Default: `10`.\n\n  Pagination size, with maximum 100.\n\n- **distractionFreeMode** `Boolean`\n\n  Default: false.\n\n  Facebook-like distraction free mode.\n\n- **pagerDirection** `String`\n\n  Default: 'last'\n\n  Comment sorting direction, available values are `last` and `first`.\n\n- **createIssueManually** `Boolean`\n\n  Default: `false`.\n\n  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`.\n\n- **proxy** `String`\n\n  Default: `https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token`.\n\n  GitHub oauth request reverse proxy for CORS. [Why need this?](https://github.com/isaacs/github/issues/330)\n\n- **flipMoveOptions** `Object`\n\n  Default:\n  ```js\n    {\n      staggerDelayBy: 150,\n      appearAnimation: 'accordionVertical',\n      enterAnimation: 'accordionVertical',\n      leaveAnimation: 'accordionVertical',\n    }\n  ```\n\n  Comment list animation. [Reference](https://github.com/joshwcomeau/react-flip-move/blob/master/documentation/enter_leave_animations.md)\n\n- **enableHotKey** `Boolean`\n\n  Default: `true`.\n\n  Enable hot key (cmd|ctrl + enter) submit comment.\n\n\n## License (MIT)\n\nOpen [LICENSE](./LICENSE) file for more info\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishantwrp%2Fvue-gitalk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnishantwrp%2Fvue-gitalk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnishantwrp%2Fvue-gitalk/lists"}