# vue3-directive-shepherd

> A Vue3 wrapper for the library Shepherd using Vue directives

Latest version **2.0.1** (published 2024-07-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-directive-shepherd
pnpm add vue3-directive-shepherd
yarn add vue3-directive-shepherd
bun add vue3-directive-shepherd
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2024-07-23 |
| First published | 2022-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | bd2051 |
| Maintainers | bd2051 |
| Keywords | vue, vue3, shepherd, site tour, tour, directive, quasar, tsx |

## Links

- npm: https://www.npmjs.com/package/vue3-directive-shepherd
- Repository: https://github.com/bd2051/vue3-directive-shepherd
- Homepage: https://github.com/bd2051/vue3-directive-shepherd#readme
- Issues: https://github.com/bd2051/vue3-directive-shepherd/issues
- npm.io page: https://npm.io/package/vue3-directive-shepherd

## Dependencies (1)

- [shepherd.js](https://npm.io/package/shepherd.js.md) ^13.0.1

## Recent versions

- 2.0.1 (latest) — 2024-07-23
- 2.0.0-beta.1 — 2024-07-23
- 2.0.0-beta.0 — 2024-07-23
- 1.0.2 — 2023-09-18
- 1.0.1 — 2023-02-20
- 1.0.0-beta.3 — 2022-12-17
- 1.0.0-beta.2 — 2022-12-13
- 1.0.0-beta.1 — 2022-12-13
- 1.0.0-beta.0 — 2022-12-13

## README

# vue3-directive-shepherd

This is a Vue3 wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd) using Vue directives

## Installation

`npm install vue3-directive-shepherd`

## Usage

Add plugin

```javascript
import { createApp } from 'vue';
import Vue3DirectiveShepherd from 'vue3-directive-shepherd';
import 'shepherd.js/dist/css/shepherd.css';
import router from "./router";

const options = {
  router,
  tourMap: {
    myCustomTour: {
      useModalOverlay: true,
    }
  }
}

const app = createApp({})
app.use(router)
app.use(Vue3DirectiveShepherd, options)
app.mount('#app')
```

### Init Options
|key|description|options|
|:---|---|---|
| `router` | Instance of VueRouter | Router |
| `tourMap` | Map of tours. Key is a name of tour. Value is [Tour options](https://shepherdjs.dev/docs/Tour.html) | key: String, value: Shepherd.Tour.TourOptions |


Use directive ```v-tour-step:[stepNumber]="directiveOptions"```

```vue
<template>
  <div>
    <some-component
      v-tour-step:1="{
        tour: myCustomTour,
        options: {
          attachTo: { on: 'bottom' },
          text: 'Test',
          buttons: [
            {
              text: 'Next',
              action: myCustomTour.next,
            },
          ],
        }
      }"
    >
        First Step
    </some-component>
    <some-component
      v-tour-step:2="{
        tour: myCustomTour,
        options: {
          attachTo: { on: 'top' },
          text: 'Test2',
          buttons: [
            {
              text: 'Stop',
              action: myCustomTour.cancel,
            },
          ],
        }
      }"
    >
        Second Step
    </some-component>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    mounted(){
      this.myCustomTour.start();
    }
  });
</script>
```

### Directive Options
|key|description|options|
|:---|---|---|
| `tour` | Instance of Shepherd Tour. Available as a global property in VueComponent | Shepherd.Tour |
| `options` | [Step options](https://shepherdjs.dev/docs/Step.html) | Step.StepOptions |

**Note:** In options attachTo.element is not required as it is filled in inside the directive

### Composition API
```vue
<script>
  import { defineComponent, inject, onMounted } from 'vue'

  export default defineComponent({
    setup() {
      const tour = inject('myCustomTour');
      onMounted(() => {
        tour.start();
      });
      return { tour };
    }
  });
</script>
```

## routerPush
A new ***routerPush*** method has been added to Tour. It can be used when moving between routes
```vue
<some-component
  v-tour-step:3="{
    tour: myCustomTour,
    options: {
      attachTo: { on: 'bottom' },
      text: 'Test2',
      beforeShowPromise,
      buttons: [
        {
          text: 'Next',
          action: () => {
            myCustomTour.routerPush({name: 'myNextRoute'}, myCustomTour.next)
          },
       },
    ],
  }
  }"
/>
```
### routerPush Options
|key|description|options|
|:---|---|---|
| `route` | route location | RouteLocationRaw |
| `cb` | The function that will be called at the end of the routing | () => void |

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