{"id":27533,"library":"vue-status-indicator","title":"Vue Status Indicator","description":"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.","status":"active","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/coderdiaz/vue-status-indicator","tags":["javascript","vue","vuejs","vue-component","component","vue.js","status","indicator","dot"],"install":[{"cmd":"npm install vue-status-indicator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-status-indicator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-status-indicator","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Named export is required for component registration; default export is for Vue.use() global registration.","wrong":"import StatusIndicator from 'vue-status-indicator'","symbol":"StatusIndicator","correct":"import { StatusIndicator } from 'vue-status-indicator'"},{"note":"Default export is a plugin object with install method; named export is the component itself.","wrong":"import { StatusIndicator } from 'vue-status-indicator'; Vue.use(StatusIndicator)","symbol":"StatusIndicator (for Vue.use)","correct":"import StatusIndicator from 'vue-status-indicator'; Vue.use(StatusIndicator)"},{"note":"Vue templates use kebab-case for component names by default.","wrong":"<StatusIndicator status=\"active\" :pulse=\"true\" />","symbol":"Component in template","correct":"<status-indicator status=\"active\" :pulse=\"true\" />"}],"quickstart":{"code":"// Install: npm install vue-status-indicator\n// main.js\nimport Vue from 'vue'\nimport { StatusIndicator } from 'vue-status-indicator'\n\nVue.component('status-indicator', StatusIndicator)\n\nnew Vue({\n  el: '#app'\n})\n\n// index.html\n<div id=\"app\">\n  <status-indicator status=\"active\" :pulse=\"true\" />\n</div>","lang":"javascript","description":"Shows how to install, register globally, and use the StatusIndicator component with active status and pulse effect."},"warnings":[{"fix":"Use one of: 'active', 'positive', 'intermediary', 'negative', or empty string for default.","message":"The status prop does not validate against a list of allowed values; any string is accepted but only known color variables work.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Test in target browsers; consider using a polyfill for CSS animations.","message":"Pulse animation may not work in older browsers (IE11) due to CSS animation support.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For Vue 3 use an alternative like 'vue-awesome-spinner' or write a custom component.","message":"The package has not been updated since 2019 and may not work with Vue 3.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use default import for Vue.use(), named import for local registration.","message":"Global registration via default import behaves differently than local registration with named import.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Register the component: import { StatusIndicator } from 'vue-status-indicator'; Vue.component('status-indicator', StatusIndicator);","cause":"Component not registered locally or globally.","error":"Unknown custom element: <status-indicator> - did you register the component correctly?"},{"fix":"Use default import: import StatusIndicator from 'vue-status-indicator'; Vue.use(StatusIndicator);","cause":"Using default import with Vue.use() but the component is not a plugin.","error":"Failed to mount component: template or render function not defined"},{"fix":"Use :status=\"status\" if it's a data property, or status=\"active\" for literal strings.","cause":"Using status as a prop but not passing it as a literal or bound value.","error":"Property or method \"status\" is not defined on the instance but referenced during render."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}