Vue GitHub Buttons

Common errors

• _ssrNode is not a function

  cause 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

  cause 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

  cause 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.

Warnings

• breaking This 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.
• breaking Version 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.
• gotcha The 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.
• gotcha For 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.
• breaking The 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.

Install

• npm install vue-github-buttons npm
• yarn add vue-github-buttons yarn
• pnpm add vue-github-buttons pnpm

Imports

• VueGitHubButtons
  wrong:

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

  correct:

  import VueGitHubButtons from '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
  wrong:

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

  correct:

  module.exports = { modules: ['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
  wrong:

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

  correct:

  module.exports = { plugins: [require('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.

Quickstart

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)
});