Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vuex-redux-saga with all npm packages installed. Try it out:

require("redux-saga/package.json"); // redux-saga is a peer dependency. require("vue/package.json"); // vue is a peer dependency. require("vuex/package.json"); // vuex is a peer dependency. var vuexReduxSaga = require("vuex-redux-saga")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vuex-redux-saga v0.0.1

Use redux-saga with vuex

vuex-redux-saga NPM version Build Status

Use redux-saga with Vuex


redux-saga is an awesome library that aims to make side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier and better.

While originally targetting Redux, redux-saga is actually not strictly tied to redux and do not rely on any internals of it's implementation. Actually redux-saga could be used with Vuex with put effect commiting mutations

This library wraps redux-saga so it can be used as Vuex plugin. It's external interface is similar to middleware provided by redux-saga.


$ npm install --save vuex-redux-saga redux-saga


import createSagaPlugin from 'vuex-redux-saga'

const sagaPlugin = createSagaPlugin();
const store = new Vuex.Store({
  // ...
  plugins: [ sagaPlugin ]

// launch your sagas



Creates a Vuex plugin and connects the Sagas to the Vuex Store

  • options: Object - A list of options to pass to the middleware. Currently supported options are:

    • sagaMonitor : SagaMonitor - If a Saga Monitor is provided, the middleware will deliver monitoring events to the monitor.

    • logger : Function - defines a custom logger for sagas. By default, saga runner logs all errors and warnings to the console. This option tells plugin to send errors/warnings to the provided logger instead. The logger is called with the params (level, ...args). The 1st indicates the level of the log ('info', 'warning' or 'error'). The rest corresponds to the following arguments (You can use args.join(' ') to concatenate all args into a single String).

    • onError : Function - if provided, the middleware will call it with uncaught errors from Sagas. useful for sending uncaught exceptions to error tracking services., ...args)

Dynamically run saga. Can be used to run Sagas only after sagaPlugin was added to instance of Vuex.Store.

  • saga: Function: a Generator function
  • args: Array<any>: arguments to be provided to saga

The method returns a Task descriptor.


saga must be a function which returns a Generator Object. See awesome redux-saga docs for more details


MIT © Illya Klymov

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free