Registry / web-framework / vue-status-indicator

vue-status-indicator

library1.2.1jsnpmunverified

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.

web-framework

npm install vue-status-indicator

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-STATUS-INDICAT

vue-status-indicator

web-frameworkjavascriptv1.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

StatusIndicator

✓ import { StatusIndicator } from 'vue-status-indicator'

✗ 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)

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

✗ 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

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

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

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

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>

Debug

Known issues

gotchaThe 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.

affects: >=1.0.0

gotchaPulse 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.

affects: >=1.0.0

deprecatedThe 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.

affects: >=1.0.0

gotchaGlobal registration via default import behaves differently than local registration with named import.

fix

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

affects: >=1.0.0

Errors

Common errors & fixes

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

Component not registered locally or globally.

fix

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

Failed to mount component: template or render function not defined

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);

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

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.

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/coderdiaz/vue-status-indicator ↗

packagehttps://www.npmjs.com/package/vue-status-indicator ↗