vue-github-buttons

GitHub buttons component for Vue.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-github-buttons
3773.1.05 years ago7 years agoMinified + gzip package size for vue-github-buttons in KB

Readme

Vue GitHub Buttons
license vue 2 npm npm Travis Codacy grade ESLint Gluons
:octocat: GitHub buttons component for Vue.
- [Installation](#installation)
- [Demo](#demo)
- [Usage](#usage)
- [Using with Nuxt](#using-with-nuxt)
	- [Module options](#module-options)
		- [`css`](#css)
		- [`useCache`](#usecache)
- [Using with VuePress](#using-with-vuepress)
- [API](#api)
	- [Plugin Options](#plugin-options)
		- [`useCache`](#usecache-1)
	- [Components](#components)
		- [`gh-btns-watch`](#gh-btns-watch)
		- [`gh-btns-star`](#gh-btns-star)
		- [`gh-btns-fork`](#gh-btns-fork)
		- [`gh-btns-follow`](#gh-btns-follow)

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.