Nuxt 3 TS Setup Implementation

[geofany]

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>

Result :

hope this help

[fgil93]

Awesome