Vue Badges

Package to easily use static badges from shields.io with icon from simpleicons.org into documentation (or any Vue.js project).

Documentation

Install it with Yarn or NPM

yarn add -D vue-badges

OR

npm i vue-badges --save-dev

Import it, ES6 way, in main.js / app.js file

import VueBadges from 'vue-badges'

Vue.use(VueBadges)

Use it in a .vue file

<template>
    <div>
        <vue-badges :deps='[["AndroidStudio"]]'></vue-badges>
        <vue-badges
          :badges="[
            ['php'],
            ['php', '7.4'],
            ['nodejs'],
            [
              {
                label: 'My new tech',
                version: '2.4',
                color: '3DDC84',
                logo: 'android',
              },
            ],
          ]"
        ></vue-badges>
    </div>
</template>

Troubles

Usage with Tailwind CSS

By default, Tailwind CSS use preflight and apply display: block; on <img />, you can add this to your style

<style>
.badges-section img {
  @apply inline !important;
}
</style>

API

| Props | Type | Default | Describe | |--------------|---------|---------|----------------------------------------------------------------------------| | badges | Array | [] | Extension of file, display it on header and get correct color if available | | iconsColored | Boolean | false | Display badges with colored icons, default display white icons | | all | Boolean | false | Display all supported badges |

License

MIT © @ewilan-riviere