Vue Reactivator

Common errors

• TypeError: reactivator is not a function

  cause 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

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

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

Warnings

• breaking Version 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`.
• gotcha 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.
  Fix: Always pass an object with reactive state implementations to the `reactivator` mixin factory, e.g., `mixins: [reactivator({ myState: myImplementation })]`.
• gotcha 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`).
  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.
• gotcha 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.
  Fix: Upgrade to `vue-reactivator@3.0.2` or newer to benefit from the fix related to store instance listener tracking and removal.

Install

• npm install vue-reactivator npm
• yarn add vue-reactivator yarn
• pnpm add vue-reactivator pnpm

Imports

• reactivator
  wrong:

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

  correct:

  import reactivator from 'vue-reactivator'

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

  import reactivator from 'vue-reactivator'

  correct:

  const reactivator = require('vue-reactivator')

  Correct CommonJS import. Since v2.0.0, Node.js 8 is no longer supported, impacting older CJS environments.
• vueReactivator (global)
  wrong:

  import { vueReactivator } from 'vue-reactivator'

  correct:

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

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

Quickstart

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>