vue-custom-belt

👋 Howdy and welcome to vue-custom-belt!

vue-custom-belt is a Vue 3 component which can be used to easily create any style martial arts belt in SVG format.

👀 Demo and Documentation

🐞 Report Bugs and 🚀 Feature Requests

✨ Highlights

• Vite + Vue + TypeScript = ❤️
• SVG vector images
• Predefined belts
• Random belt generator
• Clean and focused
• Actively maintained

Install

npm install vue-custom-belt

Example Usage

<template>
  <CustomBelt :belt-props="whiteBelt" />
</template>

<script setup lang="ts">
  import { CustomBelt, getBeltPropsSolid } from 'vue-custom-belt';

  const whiteBelt = getBeltPropsSolid('My Solid White Belt', '#FFFFFF');
</script>

For full usage and examples see the Demo and Documentation.

💻 NPM Commands

| Command | Action | | :-------------- | :------------------------ | | npm install | Installs all dependencies | | npm run build | Rebuilds project | | npm run dev | Starts local dev server | | npm run lint | Run lint project | | npm run test | Run all test cases |