Vue GitHub Buttons
:octocat: GitHub buttons component for Vue.
Installation
Via NPM:
npm install 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';
import 'vue-github-buttons/dist/vue-github-buttons.css';
Vue.use(VueGitHubButtons);
Vue.use(VueGitHubButtons, { useCache: false });
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>
Using with Nuxt
Add vue-github-buttons/nuxt
to modules
in nuxt.config.js.
module.exports = {
modules: [
'vue-github-buttons/nuxt',
['vue-github-buttons/nuxt', {
css: false,
useCache: false
}]
]
};
Module options
css
Type: Boolean
Default: true
Include Vue GitHub Buttons's CSS.
useCache
Type: Boolean
Default: true
Enable caching. (See below)
Require VuePress v1.x
Add Vue GitHub Buttons to your plugins
in .vuepress/config.js
.
module.exports = {
plugins: [
require('vue-github-buttons/plugins/vuepress'),
[
require('vue-github-buttons/plugins/vuepress'),
{
useCache: false
}
]
]
}
Plugin options are the same as Vue plugin options.
API
Plugin Options
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 });
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.