# vue-stage-play

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

Latest version **0.5.2** (published 2023-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-stage-play
pnpm add vue-stage-play
yarn add vue-stage-play
bun add vue-stage-play
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.2 |
| Published | 2023-11-16 |
| First published | 2023-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 41.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 45 |
| Author | max.lee |
| Maintainers | maxleebk |
| Keywords | vue, intro |

## Links

- npm: https://www.npmjs.com/package/vue-stage-play
- Repository: https://github.com/f820602h/vue-stage-play
- Homepage: https://github.com/f820602h/vue-stage-play#readme
- Issues: https://github.com/f820602h/vue-stage-play/issues
- npm.io page: https://npm.io/package/vue-stage-play

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [vitepress](https://npm.io/package/vitepress.md) ^1.0.0-rc.20
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^10.4.1
- [@floating-ui/vue](https://npm.io/package/@floating-ui/vue.md) ^1.0.2

## Recent versions

- 0.5.2 (latest) — 2023-11-16
- 0.5.1 — 2023-11-16
- 0.5.0 — 2023-11-16
- 0.4.0 — 2023-11-15
- 0.3.2 — 2023-10-18
- 0.3.1 — 2023-10-13
- 0.3.0 — 2023-10-05
- 0.2.0 — 2023-10-04
- 0.1.4 — 2023-10-04
- 0.1.3 — 2023-10-03
- 0.1.2 — 2023-10-03
- 0.1.1 — 2023-10-02
- 0.1.0 — 2023-10-02
- 0.0.3 — 2023-10-01
- 0.0.2 — 2023-10-01
- … 1 more at https://npm.io/package/vue-stage-play/versions

## README

<br>
<br>

<p align="center" style="margin-bottom: 0px">
<img height="100" src="./doc/public/logo.svg" alt="Vue Surf">
</p>

<h1 align="center" style="border: 0px">Vue Stage Play</h1>

<p align="center">
Designing a guided tour for your website with vue components, much like directing a stage play.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/vue-stage-play"><img src="https://img.shields.io/npm/v/vue-stage-play.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a>
  <a href="https://github.com/f820602h/vue-stage-play/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/vue-stage-play.svg" alt="License"></a>
</p>

<p align="center">
  <a href="https://f820602h.github.io/vue-stage-play/">Documentation</a>
</p>

## 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](https://introjs.com/) and [vue-starport](https://github.com/antfu/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.

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

```html
<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](https://f820602h.github.io/vue-stage-play/) for more detailed information.

## License

[MIT](./LICENSE) License © 2023 [max.lee](https://github.com/f820602)

---
_Source: https://npm.io/package/vue-stage-play · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._