Vue Redux

Official Vue bindings for Redux. Performant and flexible.

[!WARNING] This package is in alpha and is rapidly developing.

Installation

Vue Redux requires Vue 3 or later.

To use React Redux with your Vue app, install it as a dependency:

# If you use npm:
npm install @reduxjs/vue-redux

# Or if you use Yarn:
yarn add @reduxjs/vue-redux

You'll also need to install Redux and set up a Redux store in your app.

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

Usage

The following Vue component works as-expected:

<script setup lang="ts">
import { useSelector, useDispatch } from '@reduxjs/vue-redux'
import { decrement, increment } from './store/counter-slice'
import { RootState } from './store'

const count = useSelector((state: RootState) => state.counter.value)
const dispatch = useDispatch()
</script>

<template>
  <div>
    <div>
      <button aria-label="Increment value" @click="dispatch(increment())">
        Increment
      </button>
      <span>{{ count }}</span>
      <button aria-label="Decrement value" @click="dispatch(decrement())">
        Decrement
      </button>
    </div>
  </div>
</template>