Vue Stage Play

Appearance

Getting Started ​

What is VueStagePlay? ​

VueStagePlay is a component-based package designed to assist you in implementing step-by-step guided tour function within your application.

For developers using Vue, VueStagePlay makes developing such features much smoother. Simply import the component, pass in the props, and you're good to go.

The inspiration for VueStagePlay comes from intro.js and vue-starport.

Installation ​

sh
$ npm install vue-stage-play
$ npm install vue-stage-play

Usage ​

Import <StagePlaySpotlight> in your root component and wrap it around the outermost layer.

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

<template>
  <StagePlaySpotlight>
    <div class="root">
      <!-- ... -->
    </div>
  </StagePlaySpotlight>
</template>
<script setup lang="ts">
import { StagePlaySpotlight } from 'vue-stage-play'
</script>

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

Next, import <StagePlayScene> where you want to highlight elements and wrap the elements.

Set the actName and scene for <StagePlayScene>, and call the action function from the slot props.

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

<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>

<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>