Registry / web-framework / vue-github-buttons

vue-github-buttons

library3.1.0jsnpmunverified

Vue GitHub Buttons is a Vue 2 component library that provides pre-styled, functional components for displaying various GitHub buttons, such as 'watch', 'star', 'fork', and 'follow', complete with dynamic count fetching from the GitHub API. The latest stable version is 3.1.0, released in April 2020. Given the lack of activity since then, the project is considered abandoned, and no further updates or security patches are anticipated. Key features include built-in caching to mitigate GitHub API rate limits, and dedicated integration modules for Nuxt.js and VuePress 1.x. Version 3.0.0 marked a shift from Axios to the native Fetch API for network requests, which may necessitate polyfills for older browser environments.

web-framework http-networking

npm install vue-github-buttons

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-GITHUB-BUTTONS

vue-github-buttons

web-frameworkjavascriptv3.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueGitHubButtons

✓ import VueGitHubButtons from 'vue-github-buttons';

✗ const VueGitHubButtons = require('vue-github-buttons');

Primary plugin import for modern Vue CLI setups. While CommonJS `require` can work in some build systems, ESM `import` is the standard and recommended approach for client-side Vue.

CSS

✓ import 'vue-github-buttons/dist/vue-github-buttons.css';

Import the stylesheet separately to ensure correct styling for the buttons. This should be done once in your application's entry point.

Nuxt module

✓ module.exports = { modules: ['vue-github-buttons/nuxt'] };

✗ import VueGitHubButtonsModule from 'vue-github-buttons/nuxt';

For Nuxt.js integration, you register the module in your `nuxt.config.js` file, typically using CommonJS syntax as shown, not an ESM import statement.

VuePress plugin

✓ module.exports = { plugins: [require('vue-github-buttons/plugins/vuepress')] };

✗ import VuePressPlugin from 'vue-github-buttons/plugins/vuepress';

Similar to Nuxt, VuePress 1.x plugins are configured in `.vuepress/config.js` using CommonJS `require` syntax. This plugin specifically supports VuePress 1.x.

This quickstart demonstrates how to install, import, and register `vue-github-buttons` as a Vue plugin. It then uses the provided components like `<gh-btns-star>`, `<gh-btns-follow>`, and `<gh-btns-fork>` within a basic Vue application, showing how to display counts and configure basic options.

import Vue from 'vue'; import VueGitHubButtons from 'vue-github-buttons'; import 'vue-github-buttons/dist/vue-github-buttons.css'; Vue.use(VueGitHubButtons, { useCache: true }); // Enable caching to reduce GitHub API calls const App = { template: ` <div id="app"> <h1>GitHub Buttons Example</h1> <p>Star the Vue.js repository:</p> <gh-btns-star slug="vuejs/vue" show-count></gh-btns-star> <p>Follow Evan You (creator of Vue.js):</p> <gh-btns-follow user="yyx990803" show-count></gh-btns-follow> <p>Fork this project:</p> <gh-btns-fork slug="gluons/vue-github-buttons" show-count></gh-btns-fork> </div> ` }; new Vue({ el: '#app', render: h => h(App) });

Debug

Known issues

breakingThis package is incompatible with Vue 3. It explicitly requires Vue 2 as a peer dependency, and attempts to use it with Vue 3 will result in runtime errors due to fundamental API differences.

fix

Ensure your project uses Vue 2. If migrating to Vue 3, you will need to find an alternative library or custom implement GitHub buttons.

affects: >=3.0.0

breakingVersion 3.0.0 replaced Axios with the native Fetch API for data fetching. Browsers without Fetch API support (e.g., Internet Explorer) will require a Fetch polyfill to function correctly.

fix

For older browser support, include a global Fetch polyfill (e.g., `whatwg-fetch` or `cross-fetch`) in your project's entry point before `vue-github-buttons` is initialized.

affects: >=3.0.0

gotchaThe GitHub API has strict rate limits, especially for unauthenticated requests. Excessive button rendering or frequent page refreshes can quickly hit these limits, leading to failed requests and blank button counts.

fix

Always enable the `useCache: true` plugin option (which is the default) to leverage session storage caching and minimize API calls. For server-side rendering (SSR), consider implementing server-side caching or proxying requests through your own backend.

affects: >=2.0.0

gotchaFor server-side rendering (SSR) environments, prior to v3.1.0, the package might encounter 'fetch is not defined' errors. While v3.1.0 introduced an internal `node-fetch` polyfill, potential edge cases or older Node.js versions might still expose this.

fix

Upgrade to v3.1.0 or later. If issues persist in specific SSR setups, ensure your Node.js environment explicitly polyfills the `fetch` API globally if it's not natively available or if the internal polyfill isn't effective.

affects: <3.1.0

breakingThe package is considered abandoned as of April 2026, with its last update in April 2020. This means no new features, bug fixes, security patches, or compatibility updates for newer Vue versions (e.g., Vue 3) or browser changes are expected.

fix

Assess the long-term viability for your project. For ongoing projects, consider migrating to an actively maintained alternative or implementing the GitHub buttons functionality directly to ensure future compatibility and security.

affects: >=3.1.0

Errors

Common errors & fixes

_ssrNode is not a function

An issue specifically related to server-side rendering (SSR) environments in older versions of the library, potentially due to incompatible rendering helpers.

fix

Upgrade to version 2.0.3 or higher, where this specific SSR rendering bug was addressed and fixed.

ReferenceError: fetch is not defined

Occurs after upgrading to v3.0.0 in environments (older browsers, or specific Node.js versions before v3.1.0) that do not natively support the Fetch API, which v3.0.0 adopted.

fix

For client-side, include a Fetch polyfill (e.g., `whatwg-fetch`) in your project. For Node.js (SSR), upgrade to v3.1.0 or newer which includes an internal `node-fetch` polyfill.

GitHub API rate limit exceeded

Frequent requests to the GitHub API, especially unauthenticated ones, can quickly hit rate limits (e.g., 60 requests per hour for unauthenticated users), leading to API errors and buttons failing to display counts.

fix

Ensure `useCache: true` is enabled in the plugin options. For production applications with high traffic or many buttons, consider proxying GitHub API requests through your own backend to manage caching and potentially use a personal access token for higher limits.

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency, explicitly requires Vue 2.

Agent activity

14 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/gluons/vue-github-buttons ↗

packagehttps://www.npmjs.com/package/vue-github-buttons ↗

homepagehttps://gluons.github.io/vue-github-buttons/ ↗