Have problems when get started using v-tour

[liyuglikz]

I created a new VUE page and copied the getting-started code, but when I visited the page, something went wrong. (this.$tours['myTour'].start())

[mdqf]

I had the same issue, You have to replace this code:

import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
  render: h => h(App)
}).$mount('#app')

to this one:

import Vue from 'vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

also view this link.

[niggels]

I had the same issue, You have to replace this code:

import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

new Vue({
  render: h => h(App)
}).$mount('#app')

to this one:

import Vue from 'vue'
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

also view this link.

Unfortunately, this is not working in my case :/

This is my main.js

import Vue from "vue";
import { BootstrapVue } from "bootstrap-vue";
import App from "./App.vue";
import router from "./router";
import Toast from "vue-toastification";
import "./assets/toast_styles.css";
import VuePlyr from "vue-plyr";
import "vue-plyr/dist/vue-plyr.css";
import VueTour from "vue-tour";
require('vue-tour/dist/vue-tour.css');
Vue.use(VueTour);

Vue.config.productionTip = false;
Vue.config.unwrapInjectedRef = true;
Vue.use(BootstrapVue);
Vue.use(VuePlyr, {
  plyr: {},
});
const toast_options = {
  transition: "Vue-Toastification__fade",
  maxToasts: 10,
  newestOnTop: true,
};
Vue.use(Toast, toast_options);
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

This is my Home.vue file where the tour should be executed

<template>
  <div id="home">
    <div id="home-header">
      ...
    </div>
    <div id="home-content">
      <section class="min-vh-100">
        ...
      </section>
    </div>
    <v-tour name="myTour" :steps="steps" :options="tour_options"></v-tour>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      tour_options: {
          useKeyboardNavigation: false,
          labels: {
            buttonSkip: 'Überspringen',
            buttonPrevious: 'Zurück',
            buttonNext: 'Weiter',
            buttonStop: 'Fertig'
          }
        },
      steps: [
        {
          target: '.v-step-0',
          content: "Step Zero"
        },
        {
          target: '.v-step-1',
          content: 'Step One'
        },
      ],
    }
  },
  mounted() {
    this.$tours['myTour'].start()
  },
}
</script>

I get the same error as @liyuglikz :

And I cannot figure out the error. I hope that somebody may have a solution to this issue.

[hectorferronato]

Did you solve this?