Implement Engaging Guided Tours in Your Vue Apps - stage-play

Install & Download:

# NPM
$ npm i vue-stage-play

Description:

The vue-stage-play component makes it easy for Vue developers to add interactive walkthroughs to their apps.

It allows developers to design guided tours like directing a stage play, with “scenes” and “actors” represented by Vue components. It abstracts away the complexity behind the scenes, handling transitions, tooltips, and more automatically.

How to use it:

1. Import the StagePlaySpotlight in your root component.

<template>
  <StagePlaySpotlight>
    <div class="root">
      ...
    </div>
  </StagePlaySpotlight>
</template>

<script setup lang="ts">
  import { StagePlaySpotlight } from 'vue-stage-play'
</script>

2. Wrap your steps into the StagePlayScene component.

<template>
  <StagePlayScene :act-name="'liveDemo'" :scene="1">
    <template #default="slotProp">
      <div class="title">
        <!-- ... -->
      </div>
      <div class="content">
        <!-- ... -->
      </div>
      <button @click="slotProp.action()">
        Live Demo
      </button>
    </template>
  </StagePlayScene>
  <StagePlayScene
    :act-name="'liveDemo'"
    :scene="2"
    :voice-over-title="'Only Vice Over'"
    :voice-over-content="'You have the option not to highlight any elements.'"
  />
</template>

<script setup lang="ts">
  import { StagePlayScene } from 'vue-stage-play'
</script>

3. You can also register components globally as follows:

import App from "./App.vue";
import { createApp } from "vue";
import { stagePlayPlugin } from "vue-stage-play";
const app = createApp(App);
app.use(stagePlayPlugin({

spotlightPadding: 10,
spotlightBorderRadius: 10,
spotlightDarkZoneColor: "rgba(66, 66, 66, 0.5)",
allowInteract: false,
allowLeave: true,
cameraFollow: true,
cameraFollowOffset: 24,
cameraFollowOptions: {
  behavior: "smooth",
  block: "start",
  inline: "nearest",
},
cameraFixAfterFollow: true,
voiceOverPlacement: "bottom",
voiceOverAutoPlacement: true,
voiceOverAlign: "center",
voiceOverWidth: 300,
voiceOverTitle: "Hamlet Act 3 Scene 2",
voiceOverContent: "To be, or not to be; that's the question.",
voiceOverPrevButtonText: "Back",
voiceOverNextButtonText: "Next",
voiceOverDoneButtonText: "Done",
onBeforeCut: () => {
  return;
},
onAfterCut: () => {
  return;
},
onActivated: () => {
  return;
},
onDeactivated: () => {
  return;
},

}));
app.mount(“#app”);

4. Available props for the StagePlaySpotlight component.

spotlightPadding: {
  type: Number,
  required: false,
},
spotlightBorderRadius: {
  type: Number,
  required: false,
},
spotlightDarkZoneColor: {
  type: String,
  required: false,
},

5. Available props for the StagePlayScene component.

actName: {
  type: String,
  required: true,
},
scene: {
  type: Number,
  required: true,
  validator: (val: number) => val >= 0,
},
tag: {
  type: String,
  required: false,
  default: "div",
},
skip: {
  type: Boolean,
  required: false,
  default: false,
},
allowInteract: {
  type: Boolean,
  required: false,
  default: undefined,
},
allowLeave: {
  type: Boolean,
  required: false,
  default: undefined,
},
cameraFollow: {
  type: Boolean,
  required: false,
  default: undefined,
},
cameraFollowOffset: {
  type: Number,
  required: false,
},
cameraFollowOptions: {
  type: Object as () => ScrollIntoViewOptions,
  required: false,
},
cameraFixAfterFollow: {
  type: Boolean,
  required: false,
  default: undefined,
},
voiceOverPlacement: {
  type: String as () => "top" | "bottom" | "left" | "right",
  required: false,
},
voiceOverAutoPlacement: {
  type: Boolean,
  required: false,
  default: undefined,
},
voiceOverAlign: {
  type: String as () => "start" | "center" | "end",
  required: false,
},
voiceOverWidth: {
  type: Number,
  required: false,
},
voiceOverTitle: {
  type: String,
  required: false,
},
voiceOverContent: {
  type: String,
  required: false,
},
voiceOverPrevButtonText: {
  type: String,
  required: false,
},
voiceOverNextButtonText: {
  type: String,
  required: false,
},
voiceOverDoneButtonText: {
  type: String,
  required: false,
},
onBeforeCut: {
  type: Function as PropType<() => void>,
  required: false,
},
onAfterCut: {
  type: Function as PropType<() => void>,
  required: false,
},
onActivated: {
  type: Function as PropType<() => void>,
  required: false,
},
onDeactivated: {
  type: Function as PropType<() => void>,
  required: false,
},