Version License

Did you develop a Vue application hosted on GitHub? Add this Vue component for embedding a GitHub fork ribbon on it!

It is Single File component implementing GitHub ribbons with Vue. It comes with a set of properties making the component customizable for your needs.


You can install vue-ribbon using npm:

npm install --save vue-ribbon

Alternatively, you can import vue-ribbon via <script> tag in the browser directly, avoiding the NPM installation:

<script src=""></script> <script src=""></script>


Once installed, it is easy to use it.

First, you need to import vue-ribbon in your files. You can do that in different ways. For example, it can be imported into a build process for use in full-fledged Vue applications:

import Ribbon from 'vue-ribbon'; export default { components: { Ribbon, }, // rest of the component }

Once imported, you can use your component as follows:

<!-- Right Top Demo --/> <Ribbon/> <!-- Left Top Demo --/> <Ribbon text='Vue rocks!' color='#51b982' position='left-top'/> <!-- Right Bottom Demo --/> <Ribbon text='Fork me on GitHub' url='' position='right-bottom' color='#DA0011' fixed /> <!-- Left Bottom Demo --/> <Ribbon text='Ribbons are cool!' position='left-bottom' color='#FAF200' fixed />


If you need to customize the ribbon look and feel, you can use the following optional properties.

Name Description Type Default
text The text to display on the ribbon String vue-ribbon: check it out!
url The URL linked String
position The position of the ribbon. It can be right-top, right-bottom, left-top, left-bottom String right-top
color Defines the background color of the ribbon String #364a5e
fixed If defined, it makes the ribbon fixed Boolean false

The color of the text is automatically detected by the component: for background color with a luma greater than 128 the text is white, otherwise black.