https://github.com/shipshapecode/vue-shepherd

A Vue wrapper for the site tour library Shepherd
https://github.com/shipshapecode/vue-shepherd

Last synced: 2 days ago
JSON representation

A Vue wrapper for the site tour library Shepherd

• Host: GitHub
• URL: https://github.com/shipshapecode/vue-shepherd
• Owner: shipshapecode
• License: mit
• Created: 2019-02-09T01:26:48.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2025-02-10T10:25:43.000Z (10 days ago)
• Last Synced: 2025-02-16T01:55:50.186Z (5 days ago)
• Language: Vue
• Size: 3.43 MB
• Stars: 312
• Watchers: 6
• Forks: 25
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-cn - vue-shepherd - 一个基于 [shepherd](https://github.com/shipshapecode/shepherd) 的网站用户引导组件 (Uncategorized / Uncategorized)

README

        
# vue-shepherd



**[vue-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project](https://shipshape.io/)**.

[![npm version](https://badge.fury.io/js/vue-shepherd.svg)](http://badge.fury.io/js/vue-shepherd)

![Download count all time](https://img.shields.io/npm/dt/vue-shepherd.svg)

[![npm](https://img.shields.io/npm/dm/vue-shepherd.svg)]()

[![CI Build](https://github.com/shipshapecode/vue-shepherd/actions/workflows/main.yml/badge.svg)](https://github.com/shipshapecode/vue-shepherd/actions/workflows/main.yml)

This is a Vue wrapper for the [Shepherd](https://github.com/shipshapecode/shepherd), site tour, library.

```bash

npm install vue-shepherd --save

```

## Usage

### Composition API (suggested)

First, in your `main.js`, import the styles

```js

import 'shepherd.js/dist/css/shepherd.css'

```

Then, use shepherd in your components:

```vue

  


    Testing

  


  import { ref, onMounted } from 'vue'

  import { useShepherd } from 'vue-shepherd'

  const el = ref(null);

  const tour = useShepherd({

    useModalOverlay: true

  });

  

  onMounted(() =>  {

    tour.addStep({

      attachTo: { element: el.value, on: 'top' },

      text: 'Test'

    });

    tour.start();

  });

```

### Option API

To use vue-shepherd with Option API you have to install the plugin which will add the '$shepherd' function to your vue app.

```js

import { createApp } from 'vue';

import VueShepherdPlugin from 'vue-shepherd';

import '~shepherd.js/dist/css/shepherd.css';

createApp().use(VueShepherdPlugin).mount('#app');

```

```vue

  


    Testing

  


  import { defineComponent } from 'vue'

  export default defineComponent({

    data(){

      return {

        tour: null

      }

    },

    methods: {

      createTour(){

        this.tour = this.$shepherd({

          useModalOverlay: true

        });

        this.tour.addStep({

          attachTo: { element: this.$refs.el, on: 'top' },

          text: 'Test'

        });

      }

    },

    mounted(){

      this.createTour();

      this.tour.start();

    }

  });

```

## SSR

For server side rendering project, you should import the `vue-shepherd.ssr.js` file.

```js

import VueShepherd from 'vue-shepherd/dist/vue-shepherd.ssr.js';

```

## Directives

WIP