vue-composable

# Undo

Tracks variable history, to allow undo and redo

# Parameters

import { useUndo } from "vue-composable";

export interface UndoOptions<T> {
  /**
   * Watch `deep` option for changes
   */
  deep: boolean;

  /**
   * Max history change
   * @default MAX_ARRAY_SIZE
   */
  maxLength: number;

  /**
   * Clone strategy
   * @default (x)=>x
   */
  clone: (entry: T) => T;
}

const defaultOptions = {
  deep: undefined,


  maxLength: MAX_ARRAY_SIZE,

  clone(x) {
    return x;
  }
}


useUndo(defaultValue?, options?);
Parameters Type Required Default Description
defaultValue Ref<T>|T false undefined Default value
options (x: T)=>T false defaultOptions Configuration options

TIP

If tracking object please provide a options.clone function.

// example
function clone(e) {
  return JSON.parse(JSON.stringify(e));
}

# State

The useUndo function exposes the following reactive state:

import { useUndo } from "vue-composable";

const { value, prev, next } = useUndo();
State Type Description
value Ref<T> State value
prev Ref<T[]> Array of prev states
next Ref<T[]> Array of next states, only if you undo()

# Methods

The useUndo function exposes the following methods:

import { useUndo } from "vue-composable";

const { jump, undo, redo } = useUndo();
Signature Description
jump(delta) moves the cursor to delta, if delta is positive it will undo, if negative it will redo
undo(n?) Undo the state to n default to 1
redo(n?) Redo the state to n default to 1

# Example

Type a text to enable undo and redo

Prev []

Next []

# Code

<template>
  <div>
    <p>Type a text to enable undo and redo</p>
    <input v-model="value" />

    <div>
      <button @click="undo()" :disabled="!prev.length">Undo</button>
      <button @click="redo()" :disabled="!next.length">Redo</button>
    </div>

    <p>
      <b>Prev</b>
      {{ prev }}
    </p>

    <p>
      <b>Next</b>
      {{ next }}
    </p>
  </div>
</template>

<script>
import { useUndo } from "vue-composable";
export default {
  setup() {
    return useUndo();
  }
};
</script>

← ValueSync →