{"id":10778,"library":"effector-vue","title":"Effector Vue Bindings","description":"Effector-vue provides official Vue bindings for the Effector state management library, enabling reactive integration of Effector's \"algebraic effects\" based state logic within Vue applications. It is currently stable at version 23.1.1, with releases typically aligning with major `effector` updates to ensure compatibility and leverage new features. The library's core strength lies in offering a thin, efficient layer to connect Effector's immutable stores and events with Vue's reactivity system, primarily through the `useUnit` hook for the Composition API. This approach offers a powerful, declarative data flow paradigm, emphasizing explicit data transformations and event handling as an alternative to traditional Flux-like patterns. It supports both Vue 3 Composition API and Options API, facilitating diverse project setups and migrations from older Vue versions.","status":"active","version":"23.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/effector/effector","tags":["javascript","vue","composition api","business","logic","data","flow","state management","state manager","typescript"],"install":[{"cmd":"npm install effector-vue","lang":"bash","label":"npm"},{"cmd":"yarn add effector-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add effector-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vue.js framework, peer dependency for the bindings.","package":"vue","optional":false},{"reason":"Core state management library, peer dependency.","package":"effector","optional":false},{"reason":"Vue's reactivity system, a peer dependency for integration.","package":"@vue/reactivity","optional":false},{"reason":"Vue's core runtime utilities, a peer dependency.","package":"@vue/runtime-core","optional":false}],"imports":[{"note":"The `useUnit` hook, part of the Composition API, is specifically exported from `effector-vue/composition`. Direct import from `effector-vue` will not work.","wrong":"import { useUnit } from 'effector-vue';","symbol":"useUnit","correct":"import { useUnit } from 'effector-vue/composition';"},{"note":"For Vue's Options API, the `VueEffector` plugin is imported from `effector-vue/options-vue3`. This allows integration into the Vue instance via `app.use()`.","wrong":"import { VueEffector } from 'effector-vue';","symbol":"VueEffector","correct":"import { VueEffector } from 'effector-vue/options-vue3';"},{"note":"Core Effector units like `createStore` and `createEvent` are imported directly from the `effector` package, not `effector-vue`. The bindings only provide hooks and integration for Vue components.","wrong":"import { createStore } from 'effector-vue';","symbol":"createStore","correct":"import { createStore } from 'effector';"}],"quickstart":{"code":"import {createStore, createEvent} from 'effector'\nimport {useUnit} from 'effector-vue/composition'\nimport { defineComponent, h } from 'vue';\n\nexport const inputText = createEvent<string>()\nexport const $text = createStore<string>('').on(inputText, (_, text) => text)\nexport const $size = $text.map(text => text.length)\n\nconst App = defineComponent({\n  setup() {\n    const text = useUnit($text)\n    const size = useUnit($size)\n    const handleTextChange = useUnit(inputText)\n\n    return () =>\n      h('form', [\n        h('input', {\n          type: 'text',\n          onInput: (e: Event) => handleTextChange((e.target as HTMLInputElement).value),\n          value: text.value\n        }),\n        h('p', `Length: ${size.value}`)\n      ])\n  }\n});\n\n// To run in a browser or test environment (example setup)\nif (typeof window !== 'undefined') {\n  import { createApp } from 'vue';\n  const app = createApp(App);\n  app.mount('#app');\n}\n","lang":"typescript","description":"This quickstart demonstrates basic reactive state management using `effector-vue` with Vue 3's Composition API. It sets up an Effector store and event, then uses `useUnit` to bind them to a Vue component, showcasing how input changes update derived state."},"warnings":[{"fix":"Migrate usage of `forward` and `guard` to `sample` or other appropriate Effector operators. The official Effector ESLint plugin can assist with auto-fixing.","message":"Effector 23 deprecated several operators like `forward` and `guard` in favor of `sample`. While `effector-vue` itself might not directly use these, applications using older Effector patterns may see deprecation warnings.","severity":"breaking","affected_versions":">=23.0.0 of effector (peer dep)"},{"fix":"Always dispatch an event (e.g., `event(newValue)`) that a store's `.on()` or `.watch()` handler listens to, or use effects, to update store values.","message":"Direct mutation of Effector stores (e.g., `$store.value = newValue`) is not supported and will not trigger updates. Effector stores are immutable, and state changes must always occur through events or effects.","severity":"gotcha","affected_versions":">=23.0.0"},{"fix":"Ensure you import hooks like `useUnit` from `effector-vue/composition` and the `VueEffector` plugin from `effector-vue/options-vue3`.","message":"`effector-vue` provides separate entry points for the Composition API (`effector-vue/composition`) and Options API (`effector-vue/options-vue3`). Incorrectly importing from the root `effector-vue` or the wrong subpath can lead to runtime errors.","severity":"gotcha","affected_versions":">=23.0.0"},{"fix":"Plan to update import paths for `useUnit` and other composition API hooks from `effector-vue/composition` to `effector-vue` when `effector@24` is released.","message":"The `effector-vue/composition` module is slated for deprecation in `effector@24` and removal in `effector@25`, with hooks moving to the main `effector-vue` module.","severity":"gotcha","affected_versions":"Current (23.x), will be affected by future `effector` versions"},{"fix":"This often points to issues with module resolution or bundling configurations that incorrectly handle Vue's ESM exports. Ensure your build tools are correctly configured for Vue 3's ESM, or try explicit subpath imports for Vue if you encounter this.","message":"Some users have reported `SyntaxError: The requested module 'vue' does not provide an export named 'default'` when importing `effector-vue` in Vue 3 projects, related to how Vue is imported within the library's barrel file.","severity":"gotcha","affected_versions":">=23.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Check your bundler (Webpack, Vite, Rollup) configuration to ensure proper handling of Vue 3's ESM exports. Sometimes this can be resolved by upgrading bundler versions or ensuring explicit ESM-friendly settings.","cause":"Incorrect module resolution for Vue's ESM exports within `effector-vue`'s internal structure or the consuming project's bundler configuration.","error":"SyntaxError: The requested module 'vue' does not provide an export named 'default'"},{"fix":"Install `effector` and `vue` (and `@vue/reactivity`, `@vue/runtime-core`) using your package manager: `npm install effector vue @vue/reactivity @vue/runtime-core` or `yarn add effector vue @vue/reactivity @vue/runtime-core`.","cause":"Peer dependencies `effector` or `vue` are not installed or do not meet the specified version range.","error":"Cannot find module 'effector' or 'vue'"},{"fix":"Ensure the Effector unit passed to `useUnit` is a valid store or event. Remember that `useUnit` for stores returns a `Ref` in Vue 3, so access its value with `.value` in `<script setup>` or in a `render` function if it's not automatically unwrapped.","cause":"Attempting to access a reactive property `value` on a non-reactive or `undefined` result from `useUnit`, or not unwrapping `ref`s correctly.","error":"TypeError: Cannot read properties of undefined (reading 'value') when accessing state from useUnit"},{"fix":"Ensure `createGate` is defined correctly. If using `useGate`, ensure it's called within a component's `setup` function. Double-check that component props passed to the Gate align with its defined type signature.","cause":"When using `createGate` or `useGate`, the component might not be correctly registered or its props might not align with the Gate's expectations.","error":"[Vue warn]: Failed to resolve component: <ComponentName> (or similar errors related to Gate components)"}],"ecosystem":"npm"}