Vue GitHub Buttons


:octocat: GitHub buttons component for Vue.

- Vue GitHub Buttons
- Installation
- Demo
- Usage
- Using with Nuxt
- Module options
- css
- useCache
- Using with VuePress
- API
- Plugin Options
- useCache
- Components
- gh-btns-watch
- gh-btns-star
- gh-btns-fork
- gh-btns-follow

Installation

Via NPM:


``bash
npm install vue-github-buttons
`

Via Yarn:

`bash
yarn add vue-github-buttons
`

Demo

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

Usage

`javascript
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);
// Or if your don't want to use cache
Vue.use(VueGitHubButtons, { useCache: false });

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

`vue



`

Using with Nuxt

Add vue-github-buttons/nuxt to modules in nuxt.config.js.

`javascript
module.exports = {
modules: [
'vue-github-buttons/nuxt',
// Or with options
['vue-github-buttons/nuxt', {
css: false, // Don't include CSS
useCache: false // Don't use cache
}]
]
};
`

$3

#### css
Type: Boolean
Default: true

Include Vue GitHub Buttons's CSS.

#### useCache
Type: Boolean
Default: true

Enable caching. (See below)

Using with VuePress

> Require VuePress v1.x

Add Vue GitHub Buttons to your plugins in .vuepress/config.js.

`javascript
module.exports = {
plugins: [
require('vue-github-buttons/plugins/vuepress'),

/ Or using plugin with options /

[
require('vue-github-buttons/plugins/vuepress'),
{
useCache: false
}
]
]
}
`

Plugin options are the same as Vue plugin options.

API

$3

#### 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.

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

$3

#### 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.