Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Have problems when get started using v-tour #231

Open
liyuglikz opened this issue Apr 28, 2022 · 3 comments
Open

Have problems when get started using v-tour #231

liyuglikz opened this issue Apr 28, 2022 · 3 comments

Comments

@liyuglikz
Copy link

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())
image

image

@mdqf
Copy link

mdqf commented May 10, 2022

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
Copy link

niggels commented Jun 21, 2022

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 :
Bildschirmfoto 2022-06-21 um 14 48 14

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

@hectorferronato
Copy link

Did you solve this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants