vue-ribbon

library1.0.1jsnpmunverified

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.

web-framework

npm install vue-ribbon

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-RIBBON

vue-ribbon

web-frameworkjavascriptv1.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

default (Ribbon)

✓ import Ribbon from 'vue-ribbon'

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

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> `, };

Debug

Known issues

breakingvue-ribbon is built for Vue 2 only and will not work with Vue 3.

fix

Use Vue 2 or find a Vue 3 alternative.

affects: 1.0.1

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

fix

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

affects: 1.0.1

gotchaNo TypeScript definitions included; TypeScript users must write their own.

fix

Create a ambient declaration file for the module.

affects: 1.0.1

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

fix

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

affects: 1.0.1

Errors

Common errors & fixes

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

Component not registered in the Vue instance.

fix

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

'Ribbon' is not defined

Import using named import instead of default.

fix

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

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/P3trur0/vue-ribbon ↗

packagehttps://www.npmjs.com/package/vue-ribbon ↗

homepagehttps://flatmap.it/vue-ribbon/ ↗