@mknz/vue-mfe-feature-a NPM

Vue MFE Feature A - Counter Component

A customizable Counter component for Vue.js micro-frontends. Built with Vue 3 and TypeScript.

🔗 Part of the Vue MFE ecosystem. Check out @mknz/vue-mfe-wrapper for the core framework.

Features

🎯 Customizable min/max values
🔢 Adjustable step sizes
🌓 Light/Dark theme support
💾 Value validation
⚡️ Performance optimized

Installation

# Using npm
npm install @mknz/vue-mfe-feature-a

# Using bun
bun add @mknz/vue-mfe-feature-a

Quick Start

<script setup>
import { Counter } from '@mknz/vue-mfe-feature-a'
</script>

<template>
  <Counter 
    title="My Counter"
    :initial-count="0"
    :min-value="0"
    :max-value="100"
    :step-sizes="[1, 5, 10]"
    theme="light"
  />
</template>

Props

Prop	Type	Default	Description
`title`	`string`	`'Counter'`	The title displayed above the counter
`initialCount`	`number`	`0`	Starting value for the counter
`theme`	`'light' \\| 'dark'`	`'light'`	Color theme
`minValue`	`number`	`0`	Minimum allowed value
`maxValue`	`number`	`100`	Maximum allowed value
`stepSizes`	`number[]`	`[1, 5, 10]`	Available step sizes for increment/decrement

Methods

The component exposes the following methods:

increment(): Increase count by current step size
decrement(): Decrease count by current step size
reset(): Reset to initial value
toggleLimits(): Show/hide min/max limits

Events

@update:count: Emitted when count changes
@limit-reached: Emitted when min/max limit is reached

Example with Event Handling

<script setup>
import { Counter } from '@mknz/vue-mfe-feature-a'

const handleCountUpdate = (newCount) => {
  console.log('New count:', newCount)
}

const handleLimitReached = () => {
  console.log('Limit reached!')
}
</script>

<template>
  <Counter 
    @update:count="handleCountUpdate"
    @limit-reached="handleLimitReached"
  />
</template>