{"id":26619,"library":"vue-ribbon","title":"vue-ribbon","description":"A Vue 2 single-file component that adds customizable GitHub-style 'Fork me on GitHub' ribbons to your Vue app. Version 1.0.1 is the initial and only release, published as a UMD module with optional support for browser script tags via unpkg. It offers props for text, URL, position (right/left top/bottom), fixed positioning, and background color with automatic text contrast based on luminance. This is a simple, zero-dependency component for Vue 2 only and is not compatible with Vue 3 without adaption.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/P3trur0/vue-ribbon","tags":["javascript","vue","vuejs","vue2","ribbon","github","component"],"install":[{"cmd":"npm install vue-ribbon","lang":"bash","label":"npm"},{"cmd":"yarn add vue-ribbon","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-ribbon","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Only default export is available; named import will result in undefined.","wrong":"import { Ribbon } from 'vue-ribbon'","symbol":"default (Ribbon)","correct":"import Ribbon from 'vue-ribbon'"},{"note":"When using via script tag, the component is registered globally as VueRibbon.","wrong":null,"symbol":"Ribbon (direct script)","correct":"<script src=\"https://unpkg.com/vue-ribbon\"></script>"},{"note":"No TypeScript declarations provided; may need to create a .d.ts file or use any.","wrong":null,"symbol":"TypeScript types","correct":"import Ribbon from 'vue-ribbon'"}],"quickstart":{"code":"import Vue from 'vue';\nimport Ribbon from 'vue-ribbon';\n\nexport default {\n  name: 'App',\n  components: {\n    Ribbon,\n  },\n  template: `\n    <div id=\"app\">\n      <Ribbon\n        text=\"Fork me on GitHub\"\n        url=\"https://github.com/your/repo\"\n        position=\"right-top\"\n        :fixed=\"true\"\n        color=\"#364a5e\"\n      />\n    </div>\n  `,\n};","lang":"typescript","description":"Demonstrates importing the Ribbon component and using all props in a Vue 2 single-file component."},"warnings":[{"fix":"Use Vue 2 or find a Vue 3 alternative.","message":"vue-ribbon is built for Vue 2 only and will not work with Vue 3.","severity":"breaking","affected_versions":"1.0.1"},{"fix":"Use <vue-ribbon> in templates after script tag import.","message":"Component is registered globally when loaded via script tag as VueRibbon, not as 'vue-ribbon'.","severity":"gotcha","affected_versions":"1.0.1"},{"fix":"Create a ambient declaration file for the module.","message":"No TypeScript definitions included; TypeScript users must write their own.","severity":"gotcha","affected_versions":"1.0.1"},{"fix":"Always set the 'url' prop to your GitHub repo.","message":"Default URL points to a non-GitHub site (flatmap.it); always provide custom URL.","severity":"gotcha","affected_versions":"1.0.1"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Add 'Ribbon' to your components option or use Vue.component('Ribbon', Ribbon).","cause":"Component not registered in the Vue instance.","error":"Unknown custom element: <Ribbon> - did you register the component correctly?"},{"fix":"Use 'import Ribbon from 'vue-ribbon'' instead of '{ Ribbon }'.","cause":"Import using named import instead of default.","error":"'Ribbon' is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}