Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gluons/vue-github-buttons

:octocat: GitHub buttons component for Vue.
https://github.com/gluons/vue-github-buttons

github github-buttons hacktoberfest vue vue-component vuejs

Last synced: about 1 month ago
JSON representation

:octocat: GitHub buttons component for Vue.

Host: GitHub
URL: https://github.com/gluons/vue-github-buttons
Owner: gluons
License: apache-2.0
Created: 2017-03-19T06:53:24.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2022-11-12T04:30:12.000Z (about 2 years ago)
Last Synced: 2024-09-30T00:42:19.779Z (about 2 months ago)
Topics: github, github-buttons, hacktoberfest, vue, vue-component, vuejs
Language: TypeScript
Homepage: https://git.io/vue-github-buttons
Size: 2.1 MB
Stars: 37
Watchers: 2
Forks: 10
Open Issues: 7
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Vue GitHub Buttons

[![license](https://img.shields.io/github/license/gluons/vue-github-buttons.svg?style=flat-square)](https://github.com/gluons/vue-github-buttons/blob/master/LICENSE)

[![vue 2](https://img.shields.io/badge/vue-2-42b983.svg?style=flat-square)](https://vuejs.org)

[![npm](https://img.shields.io/npm/v/vue-github-buttons.svg?style=flat-square)](https://www.npmjs.com/package/vue-github-buttons)

[![npm](https://img.shields.io/npm/dt/vue-github-buttons.svg?style=flat-square)](https://www.npmjs.com/package/vue-github-buttons)

[![Travis](https://img.shields.io/travis/gluons/vue-github-buttons.svg?style=flat-square)](https://travis-ci.org/gluons/vue-github-buttons)

[![Codacy grade](https://img.shields.io/codacy/grade/bc0ed4e4a9ef4734ae741d0f8a5d358d.svg?style=flat-square)](https://www.codacy.com/app/gluons/vue-github-buttons)

[![ESLint Gluons](https://img.shields.io/badge/code%20style-gluons-9C27B0.svg?style=flat-square)](https://github.com/gluons/eslint-config-gluons)

:octocat: GitHub buttons component for Vue.

- [Vue GitHub Buttons](#vue-github-buttons)

	- [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](https://www.npmjs.com):

[![NPM](https://nodei.co/npm/vue-github-buttons.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/vue-github-buttons)

```bash

npm install vue-github-buttons

```

Via [Yarn](https://yarnpkg.com):

```bash

yarn add vue-github-buttons

```

## Demo

Go to https://gluons.github.io/vue-github-buttons

## Usage

```javascript

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)

});

```

```vue

	


		

		

		

		

	


// JavaScript ...

/* Style ... */

```

## Using with [Nuxt](https://nuxtjs.org/)

Add `vue-github-buttons/nuxt` to `modules` in **nuxt.config.js**.

```javascript

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](https://vuepress.vuejs.org/)

> Require **VuePress** v1.x

Add **Vue GitHub Buttons** to your `plugins` in `.vuepress/config.js`.

```javascript

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](#plugin-options).

## API

### Plugin Options

#### `useCache`

Type: `Boolean`  

Default: `true`

Enable count number caching. (Use [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage))

> GitHub API has [limited requests](https://developer.github.com/v3/#rate-limiting). So, caching may be useful when user refresh the webpage.

```javascript

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.