Vue Stage Play

Appearance

Basic Example ​

This example demonstrates a guided tour, covering 「Activation with useStagePlay」 and 「Changing tooltip content using props」.

vue
<script setup>
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'

const { action } = useStagePlay()
</script>

<template>
  <StagePlaySpotlight>
    <h2>How to place an elephant into a refrigerator?</h2>
    <button @click="action('basic')">Start</button>

    <StagePlayScene 
      :act-name="'basic'"
      :scene="1"
      :voice-over-title="'Step1'"
      :voice-over-content="'Open the door of the refrigerator.'" 
    >
      <h3>Step1</h3>
    </StagePlayScene>

    <StagePlayScene 
      :act-name="'basic'"
      :scene="2"
      :voice-over-title="'Step2'"
      :voice-over-content="'Place the elephant inside the refrigerator.'" 
    >
      <h3>Step2</h3>
    </StagePlayScene>

    <StagePlayScene 
      :act-name="'basic'"
      :scene="3"
      :voice-over-title="'Step3'"
      :voice-over-content="'Close the door of the refrigerator.'" 
    >
      <h3>Step3</h3>
    </StagePlayScene>

    <StagePlayScene
      :act-name="'basic'"
      :scene="4"
      :voice-over-title="'Success!'"
      :voice-over-content="'You place an elephant into a refrigerator.'"
    />
  </StagePlaySpotlight>
</template>
<script setup>
import { StagePlaySpotlight, StagePlayScene, useStagePlay } from 'vue-stage-play'

const { action } = useStagePlay()
</script>

<template>
  <StagePlaySpotlight>
    <h2>How to place an elephant into a refrigerator?</h2>
    <button @click="action('basic')">Start</button>

    <StagePlayScene 
      :act-name="'basic'"
      :scene="1"
      :voice-over-title="'Step1'"
      :voice-over-content="'Open the door of the refrigerator.'" 
    >
      <h3>Step1</h3>
    </StagePlayScene>

    <StagePlayScene 
      :act-name="'basic'"
      :scene="2"
      :voice-over-title="'Step2'"
      :voice-over-content="'Place the elephant inside the refrigerator.'" 
    >
      <h3>Step2</h3>
    </StagePlayScene>

    <StagePlayScene 
      :act-name="'basic'"
      :scene="3"
      :voice-over-title="'Step3'"
      :voice-over-content="'Close the door of the refrigerator.'" 
    >
      <h3>Step3</h3>
    </StagePlayScene>

    <StagePlayScene
      :act-name="'basic'"
      :scene="4"
      :voice-over-title="'Success!'"
      :voice-over-content="'You place an elephant into a refrigerator.'"
    />
  </StagePlaySpotlight>
</template>

How to place an elephant into a refrigerator? ​

Step1 ​

Step2 ​

Step3 ​