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
;;; // Stylesheet; Vue;// Or if your don't want to use cacheVue; el: '#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>
Nuxt
Using withAdd vue-github-buttons/nuxt
to modules
in nuxt.config.js.
moduleexports = 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)
VuePress
Using withRequire VuePress v1.x
Add Vue GitHub Buttons to your plugins
in .vuepress/config.js
.
moduleexports = plugins: /* Or using plugin with options */ 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; // 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.