{"id":12558,"library":"vue-reactivator","title":"Vue Reactivator","description":"vue-reactivator is a lightweight (0.5KB minified & gzipped) Vue mixin designed to integrate arbitrary, non-reactive global state into Vue components, making it reactive. Currently in stable version 3.0.2, releases are infrequent, typically tied to minor feature enhancements, bug fixes, or breaking changes like dropping old Node.js versions. Its primary differentiation lies in providing a flexible framework for developers to create custom \"implementations\" that bridge external mutable state (e.g., browser viewport size, external APIs, legacy JavaScript libraries) with Vue's reactivity system. This allows components to react to changes happening outside the Vue ecosystem without complex manual watchers or event bus setups, offering a clean way to keep UI in sync with global data sources that are not inherently Vuex stores or similar dedicated state management solutions.","status":"active","version":"3.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/Loilo/vue-reactivator","tags":["javascript","environment","reactive","state","vue"],"install":[{"cmd":"npm install vue-reactivator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-reactivator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-reactivator","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package primarily exports as an ES module; use direct import for ESM. CommonJS `require` works directly for the main export.","wrong":"const reactivator = require('vue-reactivator').default","symbol":"reactivator","correct":"import reactivator from 'vue-reactivator'"},{"note":"Correct CommonJS import. Since v2.0.0, Node.js 8 is no longer supported, impacting older CJS environments.","wrong":"import reactivator from 'vue-reactivator'","symbol":"reactivator","correct":"const reactivator = require('vue-reactivator')"},{"note":"When using the CDN build, the mixin is exposed globally as `vueReactivator`, not via module imports.","wrong":"import { vueReactivator } from 'vue-reactivator'","symbol":"vueReactivator (global)","correct":"<script src=\"https://unpkg.com/vue-reactivator\"></script>\n// Access as window.vueReactivator"}],"quickstart":{"code":"<template>\n  <div>\n    Your browser viewport dimensions are {{ size[0] }}x{{ size[1] }} pixels.\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport reactivator from 'vue-reactivator';\n// For this example, 'vue-browser-state' is a common accompanying package.\n// You would install it: `npm install vue-browser-state`\nimport { viewportSize } from 'vue-browser-state';\n\nexport default defineComponent({\n  mixins: [\n    reactivator({\n      size: viewportSize\n    })\n  ],\n  setup() {\n    // In Composition API, this.size would be available after mixin application.\n    // For Options API, it's directly available in template/methods/computed.\n  }\n});\n</script>","lang":"typescript","description":"Demonstrates how to use `vue-reactivator` with an external implementation (like `vue-browser-state`) to make global browser viewport dimensions reactive within a Vue component."},"warnings":[{"fix":"Upgrade your Node.js runtime to version 12.0.0 or newer. Check your `engines` field in `package.json`.","message":"Version 2.0.0 dropped support for Node.js 8. Ensure your Node.js environment is version 12.0.0 or higher when upgrading.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always pass an object with reactive state implementations to the `reactivator` mixin factory, e.g., `mixins: [reactivator({ myState: myImplementation })]`.","message":"Reactivator itself is a framework and does not provide reactive state on its own. It requires a separate 'implementation' (like `vue-browser-state` or a custom one) to define the global state sources it should reactivate.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Configure your build tools (e.g., Babel, Webpack) to transpile `vue-reactivator` and its dependencies to ES5 and include polyfills for modern JavaScript features if targeting legacy browsers.","message":"For compatibility with older browsers like Internet Explorer, `vue-reactivator` may require transpilation to ES5 and inclusion of necessary polyfills (e.g., for `Object.entries`).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `vue-reactivator@3.0.2` or newer to benefit from the fix related to store instance listener tracking and removal.","message":"In versions prior to 3.0.2, incorrect listener removal for store instances could lead to runtime errors. This was fixed to ensure proper tracking and cleanup.","severity":"gotcha","affected_versions":"<3.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are calling `reactivator` with an object of state implementations, like `mixins: [reactivator({ myState: myImplementation })]`. Also verify the import path and style (`import reactivator from 'vue-reactivator'` for ESM).","cause":"Attempting to use `reactivator` directly as a mixin without calling it as a factory function, or incorrect import leading to `undefined`.","error":"TypeError: reactivator is not a function"},{"fix":"If using a module bundler, use `import reactivator from 'vue-reactivator'`. If you intend to use the CDN, ensure the script tag is included before your application code, and your code accesses `window.vueReactivator`.","cause":"Trying to access the global `vueReactivator` variable in a module-based environment (e.g., Webpack, Vite) without actually including the CDN script or incorrectly configuring the build.","error":"ReferenceError: vueReactivator is not defined"},{"fix":"Double-check that the object passed to `reactivator` contains valid state implementations, for example, `reactivator({ myReactiveProp: someValidImplementationObject })`. Ensure `someValidImplementationObject` is correctly imported and structured as expected by Reactivator.","cause":"An invalid or `null`/`undefined` implementation object was passed to `reactivator`, meaning it couldn't find expected properties or methods to create the reactive state.","error":"TypeError: Cannot read properties of undefined (reading 'state') or similar related to `implementation`"}],"ecosystem":"npm"}