Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

org.webjars.npm:vue-github-buttons

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

org.webjars.npm:vue-github-buttons

WebJar for vue-github-buttons

  • 3.1.0
  • Source
  • Maven
  • Socket score

Version published
Maintainers
1
Source

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.

FAQs

Package last updated on 20 Oct 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc