vue-github-buttons

GitHub buttons component for Vue.

Usage no npm install needed!

<script type="module">
  import vueGithubButtons from 'https://cdn.skypack.dev/vue-github-buttons';
</script>

README

Vue GitHub Buttons

license vue 2 npm npm Travis Codacy grade ESLint Gluons

:octocat: GitHub buttons component for Vue.

Installation

Via NPM:

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';

// 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)
});
<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',
        // 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
            }
        ]
    ]
}

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 }); // 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.