Nested Example ​

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

<template>
  <StagePlaySpotlight>
    <StagePlayScene 
      :act-name="'basic'"
      :scene="1"
      :voice-over-title="'Card'"
      :voice-over-content="'This is a card.'"
      :voice-over-placement="'right'"
    >
      <template #default="scopedProps">
        <div class="card">
          <StagePlayScene
            :act-name="'basic'"
            :scene="2"
            :voice-over-title="'Title'"
            :voice-over-content="'This is title.'"
            :voice-over-placement="'right'"
          >
            <h3 style="margin: 0">Vue Stage Play</h3>
          </StagePlayScene>

          <StagePlayScene
            :act-name="'basic'"
            :scene="3"
            :voice-over-title="'Content'"
            :voice-over-content="'This is content.'" :voice-over-placement="'right'"
          >
            <p>
              Designing a guided tour for your website with vue components, much like directing a stage play.
            </p>
          </StagePlayScene>
    
          <button class="btn" @click="scopedProps.action()">Start</button>
        </div>
      </template>
    </StagePlayScene>
  </StagePlaySpotlight>
</template>

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

<template>
  <StagePlaySpotlight>
    <StagePlayScene 
      :act-name="'basic'"
      :scene="1"
      :voice-over-title="'Card'"
      :voice-over-content="'This is a card.'"
      :voice-over-placement="'right'"
    >
      <template #default="scopedProps">
        <div class="card">
          <StagePlayScene
            :act-name="'basic'"
            :scene="2"
            :voice-over-title="'Title'"
            :voice-over-content="'This is title.'"
            :voice-over-placement="'right'"
          >
            <h3 style="margin: 0">Vue Stage Play</h3>
          </StagePlayScene>

          <StagePlayScene
            :act-name="'basic'"
            :scene="3"
            :voice-over-title="'Content'"
            :voice-over-content="'This is content.'" :voice-over-placement="'right'"
          >
            <p>
              Designing a guided tour for your website with vue components, much like directing a stage play.
            </p>
          </StagePlayScene>
    
          <button class="btn" @click="scopedProps.action()">Start</button>
        </div>
      </template>
    </StagePlayScene>
  </StagePlaySpotlight>
</template>