# vue-undo-redo-stack

> A simple Vue Mixin that adds an undo/redo stack to any Vue Component

Latest version **1.0.0** (published 2018-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-undo-redo-stack
pnpm add vue-undo-redo-stack
yarn add vue-undo-redo-stack
bun add vue-undo-redo-stack
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-08-16 |
| First published | 2018-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Duncan Walker |
| Maintainers | sir-dunxalot |
| Keywords | vue, undo, redo, mixin |

## Links

- npm: https://www.npmjs.com/package/vue-undo-redo-stack
- Repository: https://github.com/sir-dunxalot/vue-undo-redo-stack
- Homepage: https://github.com/sir-dunxalot/vue-undo-redo-stack#readme
- Issues: https://github.com/sir-dunxalot/vue-undo-redo-stack/issues
- npm.io page: https://npm.io/package/vue-undo-redo-stack

## Recent versions

- 1.0.0 (latest) — 2018-08-16

## README

Vue Undo Redo Stack
======

This simple mixin adds unopinionated undo/redo logic to a Vue Mixin. You can easily control what data is added to the undo/redo stack.

- [Installation](#installation)
- [Usage](#usage)
- [Acknowledgements](#acknowledgements)

## Installation

With NPM:

```sh
npm install --save-dev vue-undo-redo-stack
```

With Yarn:

```sh
yarn add vue-undo-redo-stack
```

## Usage

Add the Mixin to any Vue Component and implement a `checkpointData` computed property and a `restoreCheckpoint()` method:

```html
<template>
  <!-- ... -->
</template>

<script>
  import vueUndoRedo from 'vue-undo-redo';

  export default {
    name: 'my-component',
    mixins: [vueUndoRedo], // 1. Add the mixin

    /* ... */

    computed: {
      checkpointData() {
        return this.name; // 2. Declare what data to stack when this.checkpoint() is called
      },
    },

    methods: {
      restoreCheckpoint(checkpointData) {
        this.name = checkpointData; // 3. Restore the component's properties given the to-be-restored checkpoint's data
      },
    },
  }
</script>
```

Three methods are made available on this component:

- `this.checkpoint()` - Sends the value of `this.checkpointData` to the stack
- `this.undo()`
- `this.redo()`

These methods can be used as follows to enable undo and redo functionality:

```html
<template>
  <!-- ... -->
</template>

<script>
  import vueUndoRedo from 'vue-undo-redo';

  export default {
    name: 'my-component',

    /* ... */

    data() {
      return {
        name: 'Ben',
      };
    },

    methods: {
      someLogic() {
        this.name; // Ben
        this.checkpoint(); // Saves name

        this.name = 'James';
        this.checkpoint(); // Saves name

        this.undo();

        this.name; // Ben

        this.redo();

        this.name; // James
      },
    },
  }
</script>
```

## Acknowledgements

Adapted from [ember-undo-stack](https://github.com/intercom/ember-undo-stack/blob/master/addon/undo-stack.js).

---
_Source: https://npm.io/package/vue-undo-redo-stack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._