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: 3 months 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 8 years ago)
- Default Branch: master
- Last Pushed: 2022-11-12T04:30:12.000Z (over 2 years ago)
- Last Synced: 2025-03-18T06:44:47.858Z (4 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
[](https://github.com/gluons/vue-github-buttons/blob/master/LICENSE)
[](https://vuejs.org)
[](https://www.npmjs.com/package/vue-github-buttons)
[](https://www.npmjs.com/package/vue-github-buttons)
[](https://travis-ci.org/gluons/vue-github-buttons)
[](https://www.codacy.com/app/gluons/vue-github-buttons)
[](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):
[](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.