@guiderjs/vue3 v0.2.7

Guiderjs vue3

A Vue component for creating customizable and animated guider on your website.

Get started

Installation

# npm
$ npm install @guiderjs/vue3
# yarn
$ yarn add @guiderjs/vue3

usage

<script setup lang="ts">
import Guider, { IGuider, Step } from "@vue3/index";
import { onMounted, ref } from "vue";

const guider = ref<IGuider>();
const steps: Step[] = [{ key: "target1", target: ".target1" }];

onMounted(() => {
  guider.value?.start();
});
</script>

<template>
  <div>
    <div class="target1">target1</div>
    <Guider :steps="steps" ref="guider"></Guider>
  </div>
</template>

API

IGuider

interface IGuider {
  /**
   * start guider from the step has given key, if no step key given, start from the first step.
   * guider needs to be `show` or `stop` status
   * @param stepKey key of the step to start
   */
  start: (stepKey?: string) => void;
  /**
   * go to next step, if current step is the last step, exit
   */
  next: () => void;
  /**
   * go back one step, if current step is the first step, do nothing.
   */
  back: () => void;
  /**
   * exit guider
   */
  exit: () => Promise<void>;
}

Component props

Step

(info of one guider step, will override component props)