{"id":12481,"library":"vue-github-buttons","title":"Vue GitHub Buttons","description":"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.","status":"abandoned","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/gluons/vue-github-buttons","tags":["javascript","vue","vuejs","vue-component","github","buttons"],"install":[{"cmd":"npm install vue-github-buttons","lang":"bash","label":"npm"},{"cmd":"yarn add vue-github-buttons","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-github-buttons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, explicitly requires Vue 2.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const VueGitHubButtons = require('vue-github-buttons');","symbol":"VueGitHubButtons","correct":"import VueGitHubButtons from 'vue-github-buttons';"},{"note":"Import the stylesheet separately to ensure correct styling for the buttons. This should be done once in your application's entry point.","symbol":"CSS","correct":"import 'vue-github-buttons/dist/vue-github-buttons.css';"},{"note":"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.","wrong":"import VueGitHubButtonsModule from 'vue-github-buttons/nuxt';","symbol":"Nuxt module","correct":"module.exports = { modules: ['vue-github-buttons/nuxt'] };"},{"note":"Similar to Nuxt, VuePress 1.x plugins are configured in `.vuepress/config.js` using CommonJS `require` syntax. This plugin specifically supports VuePress 1.x.","wrong":"import VuePressPlugin from 'vue-github-buttons/plugins/vuepress';","symbol":"VuePress plugin","correct":"module.exports = { plugins: [require('vue-github-buttons/plugins/vuepress')] };"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueGitHubButtons from 'vue-github-buttons';\nimport 'vue-github-buttons/dist/vue-github-buttons.css';\n\nVue.use(VueGitHubButtons, { useCache: true }); // Enable caching to reduce GitHub API calls\n\nconst App = {\n  template: `\n    <div id=\"app\">\n      <h1>GitHub Buttons Example</h1>\n      <p>Star the Vue.js repository:</p>\n      <gh-btns-star slug=\"vuejs/vue\" show-count></gh-btns-star>\n      <p>Follow Evan You (creator of Vue.js):</p>\n      <gh-btns-follow user=\"yyx990803\" show-count></gh-btns-follow>\n      <p>Fork this project:</p>\n      <gh-btns-fork slug=\"gluons/vue-github-buttons\" show-count></gh-btns-fork>\n    </div>\n  `\n};\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<3.1.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=3.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to version 2.0.3 or higher, where this specific SSR rendering bug was addressed and fixed.","cause":"An issue specifically related to server-side rendering (SSR) environments in older versions of the library, potentially due to incompatible rendering helpers.","error":"_ssrNode is not a function"},{"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.","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.","error":"ReferenceError: fetch is not defined"},{"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.","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.","error":"GitHub API rate limit exceeded"}],"ecosystem":"npm"}