Skip to content

Designing a guided tour for your website with vue components, much like directing a stage play.

License

Notifications You must be signed in to change notification settings

f820602h/vue-stage-play

Repository files navigation



Vue Surf

Vue Stage Play

Designing a guided tour for your website with vue components, much like directing a stage play.

Version License

Documentation

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.

Features

  • 💚 Develop more naturally and seamlessly within your Vue application.
  • 🛠️ Simplify the customization of your guided tour and tooltip using slots and props.
  • 🎯 Focused on your SFC component, no need for additional configuration.
  • 🗞️ No need to import additional CSS files.

Installation

$ npm install vue-stage-play

Usage

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

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

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

Documentation

Refer to the documentation for more detailed information.

License

MIT License © 2023 max.lee