[Vuejs]-How to create vue-shepperd component

by

1👍

Looks like a usage problem in vue hooks. The child component’s hooks fire before the parent component’s hooks. Therefore, at the time of the creation of the tour, the element does not exist. Vue-shepherd does not use vue reactivity.

Use

  mounted() {
    this.$nextTick(() => {
      this.createTour();
    });
  },

Codesanbox

But it’s better to change the component structure. If you are using vue3 you can use my package

In this case it will look like this

<template>
  <button v-tour-step:1="step1">
    Click
  </button>
</template>
<script>
import { defineComponent, inject, onMounted } from "vue";

export default defineComponent({
  setup() {
    const tour = inject("myTour");
    onMounted(() => {
      tour.start();
    });
    const step1 = {
    /* your step options */
    }
    return {
      step1,
    };
 }
});
</script>
👤tailor

Leave a comment