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