import { VueEffector } from "effector-vue/options-vue3";

since

effector-vue/options-vue3 introduced in effector-vue 23.1.0

effector-vue plugin for the Options API of Vue 3. It creates a mixin that reads the effector option of a component. Helps to migrate a large codebase from Vue 2.

Methods

`VueEffector(app)`

Arguments

app (instance Vue): Vue instance

Returns

(void)

Examples

Installation plugin

import { createApp } from "vue";
import { VueEffector } from "effector-vue/options-vue3";

import App from "./App.vue";

const app = createApp(App);

app.use(VueEffector);

Effector options

<template>
  <div>
    <span v-if="createPending">loading...</span>
    <p>{{ user.name }}</p>
    <button @click="create">Create</button>
  </div>
</template>

import { $user, create, createFx } from 'model'

export default {
  name: 'VueComponent',
  effector: () => ({
    user: $user,
    createDone: createFx.done,
    createPending: createFx.pending,
  }),
  watch: {
    createDone() {
      // do something after the effect is done
    }
  },
  methods: {
    create, // template binding
    createFx,
  },
}