wheelnav is not defined

[kenoduane]

I have installed wheelnav in my Vue 3 project using npm but I am getting an error that the wheelnav is not defined. My vue file currently looks like this:

<template>
  <HelloWorld msg="Welcome to Your Vue.js App" />

  <div id='piemenu' data-wheelnav data-wheelnav-slicepath='DonutSlice' data-wheelnav-marker
    data-wheelnav-markerpath='PieLineMarker' data-wheelnav-rotateoff data-wheelnav-navangle='270' data-wheelnav-cssmode
    data-wheelnav-init>
    <div data-wheelnav-navitemtext='0' onmouseup='alert("Place your logic here.");'></div>
    <div data-wheelnav-navitemtext='1' onmouseup='alert("Place your logic here.");'></div>
    <div data-wheelnav-navitemtext='2' onmouseup='alert("Place your logic here.");'></div>
    <div data-wheelnav-navitemtext='3' onmouseup='alert("Place your logic here.");'></div>
    <div data-wheelnav-navitemtext='4' onmouseup='alert("Place your logic here.");'></div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

var piemenu = new wheelnav('piemenu');
piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
piemenu.createWheel();

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
...
</style>

[softwaretailoring]

This is a Vue-related issue. Unfortunately, I don't have experience with Vue.