Components & Demo
Watch button
<gh-btns-watch slug="vuejs/vue" show-count></gh-btns-watch>
Star button
<gh-btns-star slug="vuejs/vue" show-count></gh-btns-star>
Fork button
<gh-btns-fork slug="vuejs/vue" show-count></gh-btns-fork>
Follow button
<gh-btns-follow user="yyx990803" show-count></gh-btns-follow>
Usage
import Vue from 'vue';
import 'vue-github-buttons/dist/vue-github-buttons.css'; // Stylesheet
import VueGitHubButtons from 'vue-github-buttons'; // Component plugin
import App from './App.vue';
Vue.use(VueGitHubButtons, { useCache: true });
new Vue({
el: '#app',
render: h => h(App)
});
<template>
<div id="app">
<gh-btns-watch
slug="vuejs/vue"
show-count
/>
<gh-btns-star
slug="vuejs/vue"
show-count
/>
<gh-btns-fork
slug="vuejs/vue"
show-count
/>
<gh-btns-follow
user="yyx990803"
show-count
/>
</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',
// Or with options
['vue-github-buttons/nuxt', {
css: false, // Don't include CSS
useCache: false // Don't use cache
}]
]
};
Module options
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
.
module.exports = {
plugins: [
require('vue-github-buttons/plugins/vuepress'),
/* Or using plugin with options */
[
require('vue-github-buttons/plugins/vuepress'),
{
useCache: false
}
]
]
}
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.
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.