Vue GitHub Buttons

GitHub buttons component for Vue.

Installation

Via NPM:

npm install -save vue-github-buttons

Via Yarn:

yarn add vue-github-buttons

Demo

Go to https://gluons.github.io/vue-github-buttons

Usage

import Vue from 'vue';
import VueGitHubButtons from 'vue-github-buttons';
import App from './App.vue';

// Stylesheet
import 'vue-github-buttons/dist/vue-github-buttons.css';

Vue.use(VueGitHubButtons);

new Vue({
	el: '#app',
	render: h => h(App)
});

<template>
	<div id="app">
		<gh-btns-watch slug="vuejs/vue" show-count></gh-btns-watch>
		<gh-btns-star slug="vuejs/vue" show-count></gh-btns-star>
		<gh-btns-fork slug="vuejs/vue" show-count></gh-btns-fork>
		<gh-btns-follow user="yyx990803" show-count></gh-btns-follow>
	</div>
</template>

<script>
// JavaScript ...
</script>

<style>
/* Style ... */
</style>

API

Plugin Option

useCache

Type: Boolean
Default: true

Enable count number caching. (Use session storage)

GitHub API has limited requests. So, caching may be useful when user refresh the webpage.

Vue.use(VueGitHubButtons, { useCache: false }); // Disable cache

Components

gh-btns-watch

👁️ A watch button.

• slug - GitHub slug (username/repo).
• show-count - Enable displaying the count number.

gh-btns-star

⭐ A star button.

• slug - GitHub slug (username/repo).
• show-count - Enable displaying the count number.

gh-btns-fork

🍴 A fork button.

• slug - GitHub slug (username/repo).
• show-count - Enable displaying the count number.

gh-btns-follow

👤 A follow button.

• user - GitHub username.
• show-count - Enable displaying the count number.