Vue Dependencies Badges

:::tip GitHub & infos

ewilan-riviere/vue-dependencies-badges

Vue Dependencies badges is a small component to allow you to display which dependencies used by a project. We can find many badges project, I choose to use statics badges TODO builder of shields.io and icons from simpleicons.org. The aim is to build static badges with label, icon, colored by techs and the version. I use a simple JSON file TODO to list all supported technologies by Vue Dependencies badges with label/icon/color/default version TODO. You can just indicate name of technology TODO to have a static badge with all features and default version TODO.

:::

Default version

Technologies evolve all the time, it's not possible to maintain all supported technologies up-to-date in JSON file. I often use a recent Long Time Supported version but it's not the last version. It's not a problem, you can indicate version in the prop, so you will see default version only if you use basic indication.

Install it with Yarn or NPM

yarn add -D vue-dependencies-badges

OR

npm i vue-dependencies-badges --save-dev

Import Vue Dependencies badges

Import it in main.js, app.js or enhanceApp.js file

:::tip Global: common JS

var VueDependenciesBadges = require('vue-dependencies-badges');

new Vue({
  components: {
    'dependencies ': VueDependenciesBadges
  }
})

:::


:::tip Global: ES6 (Vue-CLI users)

import VueDependenciesBadges from 'vue-dependencies-badges'

Vue.use(VueDependenciesBadges)

:::


:::details Optional: local

If you want to import the component just for a specific component

<template>
  <div>
    <dependencies
      :deps='[["AndroidStudio"]]'
    ></dependencies>
  </div>
</template>

<script>
import VueDependenciesBadges from 'vue-dependencies-badges'

export default {
  components: {
    VueDepBadges: VueDependenciesBadges
  }
}

</script>

:::


Props list

PropTypeDefaultDescribe
depsArray[]List of dependencies, see syntax below
iconsColoredBooleanfalseSet true if you want to have colored icons
allBooleanfalseDisable deps prop and list all techs supported

You can use deps prop with different ways:

// declare version
:deps='[
  ["node.js","11.15"]
]'
// take default version
:deps='[
  ["node.js"]
]'

List of supported techs

All techs are in database.json, you can check it on GitHub

Syntax of label

To add a supported tech, you have to add like it

:deps='[
  ["label", "optionalVersion"]
]'

But what can we add for label with space ?

# just with spaces
label with spaces
# CamelCase
labelWithSpaces
# dashes
label-with-spaces
# underscores
label_with_spaces

:::tip Examples

Basic case

To have "Visual Studio Code"
 - Visual Studio Code
 - visual-studio-code
 - visual_studio_code
 - VisualStudioCode

Specific case

For js technologies, we can find different syntaxes, so these component will check if js is contain in label

To have "Node.js"
 - nodejs
 - nodeJS
 - node-js
 - node.js

:::

To add not supported tech

:::tip Add definitively

If you use a tech on many documentation, it's could be more easily to add this tech to database.json. You have two options:

  • Open an issue
  • Fork repository, update database.json and pull request

:::

Basic

:deps='[
  ["My Tech", "2.3"]
]'

With details

:deps='[
  [{
    label: "My Tech",
    version: "2.4",
    link: "http://my-domain.com",
    color: "3DDC84",
    colorIcon: "3DDC84",
    logo: "android",
  }]
]'

Import in any component

If Vue Dependencies badges is globally imported, use it in a .vue file or .md file for Vuepress

<template>
  <div>
    <dependencies
      :deps='[["AndroidStudio"]]'
    ></dependencies>
  </div>
</template>
<template>
  <div>
    <dependencies
      :deps="[
        ['visual studio code', '1.4'],
        ['visual_studio_code', '1.2'],
        ['visual-studio-code'],
        ['nodejs'],
        ['node-js', '11.15'],
        ['node.js', '12.15'],
        ['php'],
        ['New tech'],
        ['my tech', '2.3'],
        [
          {
            label: 'My new tech',
            version: '2.4',
            color: '3DDC84',
            logo: 'android',
          },
        ],
      ]"
    ></dependencies>
  </div>
</template>