Vue 3 Compatibility

[lsnow99]

Hi!

What is the current status on Vue 3 compatibility? I'd be happy to test out a branch if there is one in development.

Thanks

[florianrubel]

Upvote. We need it. :) Please Please Please

[mmorainville]

Hi,

We're working on it but it's not there yet. The difficulty is not the migration/rewrite, it's to find free time to do it ! But it's on its way!
We plan a release as soon as possible but this won't be before at least 2-3 weeks.
if you really need a Vue 3 version right now, you can either: copy/paste the 2 components VueTour and VueStep and test if it's working ok as pretty much all the code should be retro-compatible or you can fork the Vue 2 version and make your own to use until we release the new version.

We understand it's not ideal but it's the best we can do right now.

[sbathgate]

I was toying around with this recently and resolved the incompatibility by running the plugin within my app and updating main.js to:

import VTour from './components/VTour'
import VStep from './components/VStep'

const VueTour = {
  install (app, options) {
    if (!options) {
      options = {};
    }

    app.component(VTour.name, VTour)
    app.component(VStep.name, VStep)

    // Object containing Tour objects (see VTour.vue) where the tour name is used as key
    app.config.globalProperties.$tours = {}
  }
}

export default VueTour;

When I get a couple of minutes I can look at putting together a PR for you, in the meantime hopefully this helps.

Edit:

There were also a couple of deprecated commands to update too.
Destroy -> unmounted,
beforeDestroy -> beforeUnmount

[mmorainville]

Hi @sbathgate,

Yes sure a PR would be welcome!
If these are really all the changes needed to make the lib Vue 3-compatible it may even be made retro-compatible so that the lib may be compatible with Vue 2 and Vue 3 without breaking changes. This would be great if that's the case!

[Sitronik]

Hello guys. I added vue 3 support and other functionality PR

[Sitronik]

You will need to create the next branch and move the PR there, then you can publish with the tag next to npm. PR only works for vue3
For those who need to use vue-tour in vue 3 I made a temporary package npm -i v3-tour

[lokize]

@Sitronik hi, how to use your package after install? i have problems to useit... thanks!

[Sitronik]

@Sitronik hi, how to use your package after install? i have problems to useit... thanks!

Hi, you can download code of package here:
https://github.com/Sitronik/v3-tour
Then run the serve script and you will see that everything works

Example how to use in directory public -> index.html

OR

In you client entry point:

import * as Vue from 'vue'
import App from './App.vue'
import VueTour from 'v3-tour'

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

const app = Vue.createApp(App)

app.use(VueTour)

[DjilanoS]

Doesn't seem to work for me @Sitronik with Vue3.

[Sitronik]

Doesn't seem to work for me @Sitronik with Vue3.

Hello, show an example of the code you are using

[DjilanoS]

Trying to get it working with the Vue 3 Composition api, doesn't seem to work.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './locales'
import VueTour from 'v3-tour'


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

const app = createApp(App)
app.use(router).use(i18n).use(VueTelInput, globalOptions).use(VueTour).mount('#app')

Component:

<template>
<h1 data-v-step="0">Hello 👋</h1>
<v-tour name="myTour" :steps="steps"></v-tour>
</template>

export default {
    setup: () => {
        const state = reactive({
            steps: [
                {
                    target: '[data-v-step="0"]', // We're using document.querySelector() under the hood
                    header: {
                        title: 'Get Started',
                    },
                    content: 'Discover <strong>Vue Tour</strong>!',
                },
            ],
        })

        return {
            ...toRefs(state),
        }
    },
}

Also tried with the old Option api as described in the documentation.

[Sitronik]

Trying to get it working with the Vue 3 Composition api, doesn't seem to work.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './locales'
import VueTour from 'v3-tour'


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

const app = createApp(App)
app.use(router).use(i18n).use(VueTelInput, globalOptions).use(VueTour).mount('#app')

Component:

<template>
<h1 data-v-step="0">Hello 👋</h1>
<v-tour name="myTour" :steps="steps"></v-tour>
</template>

export default {
    setup: () => {
        const state = reactive({
            steps: [
                {
                    target: '[data-v-step="0"]', // We're using document.querySelector() under the hood
                    header: {
                        title: 'Get Started',
                    },
                    content: 'Discover <strong>Vue Tour</strong>!',
                },
            ],
        })

        return {
            ...toRefs(state),
        }
    },
}

Also tried with the old Option api as described in the documentation.

Try changing target to id of html element should work

<h1 id="step1">Hello 👋</h1>

export default {
    setup: () => {
        const state = reactive({
            steps: [
                {
                    target: '#step1',
                    header: {
                        title: 'Get Started',
                    },
                    content: 'Discover <strong>Vue Tour</strong>!',
                },
            ],
        })

        return {
            ...toRefs(state),
        }
    },
}

I not tested with "document.querySelector() under the hood"

[DjilanoS]

Trying to get it working with the Vue 3 Composition api, doesn't seem to work.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './locales'
import VueTour from 'v3-tour'


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

const app = createApp(App)
app.use(router).use(i18n).use(VueTelInput, globalOptions).use(VueTour).mount('#app')

Component:

<template>
<h1 data-v-step="0">Hello 👋</h1>
<v-tour name="myTour" :steps="steps"></v-tour>
</template>

export default {
    setup: () => {
        const state = reactive({
            steps: [
                {
                    target: '[data-v-step="0"]', // We're using document.querySelector() under the hood
                    header: {
                        title: 'Get Started',
                    },
                    content: 'Discover <strong>Vue Tour</strong>!',
                },
            ],
        })

        return {
            ...toRefs(state),
        }
    },
}

Also tried with the old Option api as described in the documentation.

Try changing target to id of html element should work

<h1 id="step1">Hello 👋</h1>

export default {
    setup: () => {
        const state = reactive({
            steps: [
                {
                    target: '#step1',
                    header: {
                        title: 'Get Started',
                    },
                    content: 'Discover <strong>Vue Tour</strong>!',
                },
            ],
        })

        return {
            ...toRefs(state),
        }
    },
}

I not tested with "document.querySelector() under the hood"

Thanks for the reply! But changing the target to #step1 doesn't seem to work. No errors are thrown, nor is it showing the tooltips.

[DjilanoS]

This is the rendered html output:

<div class="v-tour" data-v-22ba47ca>
    <!---->
</div>

<h1 id="step1" data-v-22ba47ca>Hello 👋</h1>

I think it's not working because this.$tours['myTour'].start() is missing. but this. is not accessible within the setup() composition api.

[Sitronik]

Trying to get it working with the Vue 3 Composition api, doesn't seem to work.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './locales'
import VueTour from 'v3-tour'


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

const app = createApp(App)
app.use(router).use(i18n).use(VueTelInput, globalOptions).use(VueTour).mount('#app')

Component:

<template>
<h1 data-v-step="0">Hello 👋</h1>
<v-tour name="myTour" :steps="steps"></v-tour>
</template>

export default {
    setup: () => {
        const state = reactive({
            steps: [
                {
                    target: '[data-v-step="0"]', // We're using document.querySelector() under the hood
                    header: {
                        title: 'Get Started',
                    },
                    content: 'Discover <strong>Vue Tour</strong>!',
                },
            ],
        })

        return {
            ...toRefs(state),
        }
    },
}

Also tried with the old Option api as described in the documentation.

Try changing target to id of html element should work

<h1 id="step1">Hello 👋</h1>

export default {
    setup: () => {
        const state = reactive({
            steps: [
                {
                    target: '#step1',
                    header: {
                        title: 'Get Started',
                    },
                    content: 'Discover <strong>Vue Tour</strong>!',
                },
            ],
        })

        return {
            ...toRefs(state),
        }
    },
}

I not tested with "document.querySelector() under the hood"

Thanks for the reply! But changing the target to #step1 doesn't seem to work. No errors are thrown, nor is it showing the tooltips.

You are welcome. You need to add v-step component in html template as in example:
https://github.com/Sitronik/v3-tour/blob/master/public/index.html

Download code of https://github.com/Sitronik/v3-tour and run "serve" script and you will see everything works correctly in example