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

effector-vue plugin for vue 3 creates a mixin that takes a binding function from the effector option.

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