Carousel Progress In Nuxt 3

[thefubon]

Please tell me how to add Carousel Progress to Vue Splide. I am using with Nuxt 3.

I add it to the template. But the scripts don't work.

<template>
  <div class="py-8 md:container md:py-16" data-uk-height-viewport="expand: true">
    <Splide :options="option" aria-label="Scroll Carusel">
      <SplideSlide class="cursor-pointer overflow-hidden rounded-xl" v-for="item in unsplash" :key="item" data-hs-overlay="#hs-vertically-centered-scrollable-modal">
        <img :src="item.img" alt="" />
      </SplideSlide>
    </Splide>

    <!-- Add the progress bar element -->
    <div class="my-slider-progress mt-10">
      <div class="my-slider-progress-bar "></div>
    </div>
  </div>
</template>

<script setup>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import '@splidejs/vue-splide/css/core';
import '@splidejs/vue-splide/css';
//import '@splidejs/vue-splide/css/skyblue';
//import '@splidejs/vue-splide/css/sea-green';

const option = {
  pagination : false,
  arrows     : true,
  //rewind : false,
  cover   : true,
  lazyLoad: 'nearby',
  //type   : 'loop',
  //perPage: 3,
  height  : '20rem',
  perPage: 4,
  perMove: 4,
  fixedWidth : '22.5%',
  //autoplay: false,
  //fixedHeight: '6rem',
  gap    : '16px',
  //height : '20rem',
  //updateOnMove: true,
  focus       : 'center',
  //snap   : true,
  drag   : 'free',
  //omitEnd: false,
  //autoWidth: true,
  //throttle: 1000,
  flickMaxPages: 1,
  padding: {
    left: '0px',
    right: '0px'
  },
  breakpoints: {
    768: {
      perMove: 1,
      fixedWidth : '80%',
      arrows     : false,
      padding: {
        left: '16px',
        right: '16px',
      },
    },
  },
}

const unsplash = reactive([
  {img: 'https://source.unsplash.com/random/301'},
  {img: 'https://source.unsplash.com/random/302'},
  {img: 'https://source.unsplash.com/random/303'},
  {img: 'https://source.unsplash.com/random/304'},
  {img: 'https://source.unsplash.com/random/305'},
  {img: 'https://source.unsplash.com/random/301'},
  {img: 'https://source.unsplash.com/random/302'},
  {img: 'https://source.unsplash.com/random/303'},
  {img: 'https://source.unsplash.com/random/304'},
])

useHead({
  script: [
    { src: '/js/script.js', body: true },
  ],
})
</script>

<style>

.splide {
  padding: 20px 0;
}

.splide .splide__arrow {
  top: 0;
  bottom: 0;
  height: 100%;
  transform: none;
  border-radius: unset;
  width: 50px;
  opacity: 0.9;
}

.splide__arrow.splide__arrow--prev {
  left: 0;
  background: linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
}

.splide__arrow.splide__arrow--next {
  right: 0;
  background: linear-gradient(270deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0) 100%);
}

.splide__arrow--prev {
  @apply !left-[-1.5rem];
}
.splide__arrow--next {
  @apply !right-[-1.5rem];
}

/* Gestaltung des aktiven Slides (optional) */
.is-active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ScrollBar*/

.my-slider-progress {
  background: #ccc;
}

.my-slider-progress-bar {
  background: greenyellow;
  height: 2px;
  transition: width 400ms ease;
  width: 0;
}
</style>

var splide = new Splide( '.splide' );
var bar = splide.root.querySelector( '.my-slider-progress-bar' );

// Updates the bar width whenever the carousel moves:
splide.on( 'mounted move', function () {
  var end  = splide.Components.Controller.getEnd() + 1;
  var rate = Math.min( ( splide.index + 1 ) / end, 1 );
  bar.style.width = String( 100 * rate ) + '%';
} );```

And the console gives an error
Uncaught ReferenceError: Splide is not defined
<anonymous> http://localhost:3000/js/script.js:1