Nuxt.js(Nuxt3)で tourguide-js（サイトツアーを行うライブラリ）を使う方法

Nuxt.js(Nuxt3）でサイトツアー機能を利用する方法について

• 今回は以下の環境で作業を実施

  • Nuxt.jsバージョン：3.0.0
  • tourguide-jsバージョン：0.0.7

• セットアップ方法

  • npm i @sjmc11/tourguidejs

• コーディング例

  <template>
      <div data-tg-tour="hogehoge"></div>
  </template>
  
  <script setup>
  import "@sjmc11/tourguidejs/src/scss/tour.scss"
  import {TourGuideClient} from "@sjmc11/tourguidejs/src/Tour"
  
  onMounted(()=>{
    const tg = new TourGuideClient();
    tg.start()    
  })
  </script>
  

参考

• https://zenn.dev/yuta_enginner/articles/0051a0b9ec7484
• https://github.com/sjmc11/tourguide-js