Vue 3 Status Indicator

A simple, customizable status indicator component for Vue 3. Show status with colored dots and optional pulse animations.

Installation

npm install @maxigalaxi/vue-status-indicator

Usage

Global Registration

import { createApp } from 'vue'
import StatusIndicator from '@maxigalaxi/vue-status-indicator'
// Import the CSS
import '@maxigalaxi/vue-status-indicator/dist/status-indicator.css'

const app = createApp(App)
app.use(StatusIndicator)

Local Registration

import { StatusIndicator } from '@maxigalaxi/vue-status-indicator'
import '@maxigalaxi/vue-status-indicator/dist/status-indicator.css'

export default {
  components: {
    StatusIndicator
  }
}

Basic Usage

<template>
  <status-indicator status="positive" />
  <status-indicator status="negative" pulse />
</template>

Props

Name	Type	Default	Description
status	String	""	Status type: 'active', 'positive', 'intermediary', 'negative'
pulse	Boolean	false	Enable pulsing animation

Customization

Customize the appearance using CSS variables:

:root {
  --status-indicator-size: 10px;
  --status-indicator-animation-duration: 2s;

  /* Default state */
  --status-indicator-color: rgb(216, 226, 233);
  
  /* Active state */
  --status-indicator-color-active: rgb(0, 149, 255);
  
  /* Positive state */
  --status-indicator-color-positive: rgb(75, 210, 143);
  
  /* Intermediary state */
  --status-indicator-color-intermediary: rgb(255, 170, 0);
  
  /* Negative state */
  --status-indicator-color-negative: rgb(255, 77, 77);
}

Why This Fork?

This is a Vue 3 compatible fork of the original vue-status-indicator package. Created to provide Vue 3 support while maintaining the simplicity of the original component.

License

MIT © Maximilian Rittler