Registry / web-framework / vue-reactivator

vue-reactivator

library3.0.2jsnpmunverified

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.

web-framework

npm install vue-reactivator

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-REACTIVATOR

vue-reactivator

web-frameworkjavascriptv3.0.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

reactivator

✓ import reactivator from 'vue-reactivator'

✗ const reactivator = require('vue-reactivator').default

This package primarily exports as an ES module; use direct import for ESM. CommonJS `require` works directly for the main export.

reactivator

✓ const reactivator = require('vue-reactivator')

✗ import reactivator from 'vue-reactivator'

Correct CommonJS import. Since v2.0.0, Node.js 8 is no longer supported, impacting older CJS environments.

vueReactivator (global)

✓ <script src="https://unpkg.com/vue-reactivator"></script> // Access as window.vueReactivator

✗ import { vueReactivator } from 'vue-reactivator'

When using the CDN build, the mixin is exposed globally as `vueReactivator`, not via module imports.

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.

<template> <div> Your browser viewport dimensions are {{ size[0] }}x{{ size[1] }} pixels. </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import reactivator from 'vue-reactivator'; // For this example, 'vue-browser-state' is a common accompanying package. // You would install it: `npm install vue-browser-state` import { viewportSize } from 'vue-browser-state'; export default defineComponent({ mixins: [ reactivator({ size: viewportSize }) ], setup() { // In Composition API, this.size would be available after mixin application. // For Options API, it's directly available in template/methods/computed. } }); </script>

Debug

Known issues

breakingVersion 2.0.0 dropped support for Node.js 8. Ensure your Node.js environment is version 12.0.0 or higher when upgrading.

fix

Upgrade your Node.js runtime to version 12.0.0 or newer. Check your `engines` field in `package.json`.

affects: >=2.0.0

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

fix

Always pass an object with reactive state implementations to the `reactivator` mixin factory, e.g., `mixins: [reactivator({ myState: myImplementation })]`.

affects: >=1.0.0

gotchaFor compatibility with older browsers like Internet Explorer, `vue-reactivator` may require transpilation to ES5 and inclusion of necessary polyfills (e.g., for `Object.entries`).

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.

affects: >=1.0.0

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

fix

Upgrade to `vue-reactivator@3.0.2` or newer to benefit from the fix related to store instance listener tracking and removal.

affects: <3.0.2

Errors

Common errors & fixes

TypeError: reactivator is not a function

Attempting to use `reactivator` directly as a mixin without calling it as a factory function, or incorrect import leading to `undefined`.

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

ReferenceError: vueReactivator is not defined

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.

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

TypeError: Cannot read properties of undefined (reading 'state') or similar related to `implementation`

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.

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.

Upgrade

Version history

3.0.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

14 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Loilo/vue-reactivator ↗

packagehttps://www.npmjs.com/package/vue-reactivator ↗