hello, i want to share my implementation on Nuxt 3 TS Setup
/plugins/tour.ts
import VueTour from "vue3-tour";
import "vue3-tour/dist/vue3-tour.css";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueTour as any).provide('tours', nuxtApp.vueApp.config.globalProperties.$tours);
});
/pages/index.vue
<template>
<div>
<div id="v-step-0">
A DOM element on your page. The first step will pop on this element
because its ID is 'v-step-0'.
</div>
<div class="v-step-1">
A DOM element on your page. The second step will pop on this element
because its ID is 'v-step-1'.
</div>
<div data-v-step="2">
A DOM element on your page. The third and final step will pop on this
element because its ID is 'v-step-2'.
</div>
<v-tour name="myTour" :steps="steps"></v-tour>
</div>
</template>
<script setup lang="ts">
const tours = inject("tours");
const steps = ref < any > ([
{
target: "#v-step-0",
header: {
title: "Get Started",
},
content: `Discover <strong>Vue Tour</strong>!`,
},
{
target: ".v-step-1",
content: "An awesome plugin made with Vue.js!",
},
{
target: '[data-v-step="2"]',
content:
"Try it, you'll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.",
params: {
placement: "top",
},
},
]);
onMounted(() => {
tours["myTour"].start();
});
</script>
hello, i want to share my implementation on Nuxt 3 TS Setup
/plugins/tour.ts
/pages/index.vue
Result :
hope this help