Vue Status Indicator

1.2.1 verified Mon Apr 27 auth: no javascript

A Vue component that renders a colored status indicator dot with optional pulse animation. Current stable version is 1.2.1, released as a minor update to fix the status attribute and pulse effect. This package is a fork of the vanilla JS status-indicator adapted for Vue. It provides five built-in status colors (default, active, positive, intermediary, negative) that can be customized via CSS variables. The component is lightweight and supports both local and global registration. Release cadence is sporadic with no recent activity since 2019. Differentiators include ease of integration with Vue and simple declarative API using just 'status' and 'pulse' props.

Common errors

error Unknown custom element: <status-indicator> - did you register the component correctly? ↓

cause Component not registered locally or globally.

fix

Register the component: import { StatusIndicator } from 'vue-status-indicator'; Vue.component('status-indicator', StatusIndicator);

error Failed to mount component: template or render function not defined ↓

cause Using default import with Vue.use() but the component is not a plugin.

fix

Use default import: import StatusIndicator from 'vue-status-indicator'; Vue.use(StatusIndicator);

error Property or method "status" is not defined on the instance but referenced during render. ↓

cause Using status as a prop but not passing it as a literal or bound value.

fix

Use :status="status" if it's a data property, or status="active" for literal strings.

Warnings

gotcha The status prop does not validate against a list of allowed values; any string is accepted but only known color variables work. ↓

fix Use one of: 'active', 'positive', 'intermediary', 'negative', or empty string for default.

gotcha Pulse animation may not work in older browsers (IE11) due to CSS animation support. ↓

fix Test in target browsers; consider using a polyfill for CSS animations.

deprecated The package has not been updated since 2019 and may not work with Vue 3. ↓

fix For Vue 3 use an alternative like 'vue-awesome-spinner' or write a custom component.

gotcha Global registration via default import behaves differently than local registration with named import. ↓

fix Use default import for Vue.use(), named import for local registration.

Install

npm install vue-status-indicator

yarn add vue-status-indicator

pnpm add vue-status-indicator

Imports

StatusIndicator
wrong
```
import StatusIndicator from 'vue-status-indicator'
```
correct
```
import { StatusIndicator } from 'vue-status-indicator'
```
Named export is required for component registration; default export is for Vue.use() global registration.

StatusIndicator (for Vue.use)

wrong

import { StatusIndicator } from 'vue-status-indicator'; Vue.use(StatusIndicator)

correct

import StatusIndicator from 'vue-status-indicator'; Vue.use(StatusIndicator)

Default export is a plugin object with install method; named export is the component itself.

Component in template

wrong

<StatusIndicator status="active" :pulse="true" />

correct

<status-indicator status="active" :pulse="true" />

Vue templates use kebab-case for component names by default.

Quickstart

Shows how to install, register globally, and use the StatusIndicator component with active status and pulse effect.

// Install: npm install vue-status-indicator
// main.js
import Vue from 'vue'
import { StatusIndicator } from 'vue-status-indicator'

Vue.component('status-indicator', StatusIndicator)

new Vue({
  el: '#app'
})

// index.html
<div id="app">
  <status-indicator status="active" :pulse="true" />
</div>