vue-ribbon

1.0.1 verified Fri May 01 auth: no javascript

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.

Common errors

error Unknown custom element: <Ribbon> - did you register the component correctly? ↓

cause Component not registered in the Vue instance.

fix

Add 'Ribbon' to your components option or use Vue.component('Ribbon', Ribbon).

error 'Ribbon' is not defined ↓

cause Import using named import instead of default.

fix

Use 'import Ribbon from 'vue-ribbon'' instead of '{ Ribbon }'.

Warnings

breaking vue-ribbon is built for Vue 2 only and will not work with Vue 3. ↓

fix Use Vue 2 or find a Vue 3 alternative.

gotcha Component is registered globally when loaded via script tag as VueRibbon, not as 'vue-ribbon'. ↓

fix Use <vue-ribbon> in templates after script tag import.

gotcha No TypeScript definitions included; TypeScript users must write their own. ↓

fix Create a ambient declaration file for the module.

gotcha Default URL points to a non-GitHub site (flatmap.it); always provide custom URL. ↓

fix Always set the 'url' prop to your GitHub repo.

Install

npm install vue-ribbon

yarn add vue-ribbon

pnpm add vue-ribbon

Imports

default (Ribbon)
wrong
```
import { Ribbon } from 'vue-ribbon'
```
correct
```
import Ribbon from 'vue-ribbon'
```
Only default export is available; named import will result in undefined.
Ribbon (direct script)
```
<script src="https://unpkg.com/vue-ribbon"></script>
```
When using via script tag, the component is registered globally as VueRibbon.
TypeScript types
```
import Ribbon from 'vue-ribbon'
```
No TypeScript declarations provided; may need to create a .d.ts file or use any.

Quickstart

Demonstrates importing the Ribbon component and using all props in a Vue 2 single-file component.

import Vue from 'vue';
import Ribbon from 'vue-ribbon';

export default {
  name: 'App',
  components: {
    Ribbon,
  },
  template: `
    <div id="app">
      <Ribbon
        text="Fork me on GitHub"
        url="https://github.com/your/repo"
        position="right-top"
        :fixed="true"
        color="#364a5e"
      />
    </div>
  `,
};