npm i mv-full-page

yarn add mv-full-page

import { createApp } from 'vue';
import MvFullPage from 'mv-full-page'
import "../node_modules/mv-full-page/dist-lib/style.css"; // Ссылка на CSS файл относительно пути для совместимости с webpack и vite

const app = createApp();

app.use(MvFullPage);

import { defineComponent } from "vue";
import MvFullPage from 'mv-full-page'
import "../node_modules/mv-full-page/dist-lib/style.css"; // Ссылка на файл CSS относительно пути для совместимости с webpack и vite

export default defineComponent({
    components:{
        MvFullPage
    }
});

   <mv-full-page   
    :pages="list.length"
    :v-model:page="page" 
    >
      <!-- Динамический слот -->
      <template
        v-slot:[dynamicSlotName+(index+1)]
        v-for="(item, index) in list"
      >
        <div :class="`page${index + 1}`" :key="index">
          {{ `Страница ${JSON.stringify(item)}` }}
        </div>
      </template>
    </mv-full-page>

<!-- Если конфигурация требует асинхронного получения, рекомендуется использовать v-if="isInit" чтобы определить, следует ли начинать рендеринг компонента. Вы можете создать собственную загрузку или текстовое приглашение для ожидания рендеринга компонента -->
    <mv-full-page v-if="isInit" ref="myFullPage" :pages="pages" v-model:page="page" :config="config"
      @rollEnd="onRollEnd" @pointerMouseover="pointerMouseover">
    </mv-full-page>
    <p v-else style="font-size: 30px;text-align:center;padding: 30px;color: #656565;">Загрузка...</p>
  

{
    /**
     * Отключить прокрутку
     */
    disabled: false,
    /**
     * Режим позиционирования
     */
    position: "fixed",
    /**
     * Пользовательская ширина контейнера
     */
    width: "100%",
    /**
     * Пользовательская высота контейнера
     */
    height: "100%",
    /**
     * v => вертикальное направление, h => горизонтальное направление
     */
    direction: "h",
    poi: {
      /**
       * Показать индикатор
       */
      pointer: true,
      /**
       * Положение индикатора
       */
      position: "right",
    },
    /**
     * Кэшировать страницы
     */
    cache: true,
    /**
     * Массив фонов страниц
     * Пример: [{цвет:'зеленый',изображение:'http://...'}]
     */
    bgArr: [],
    /**
     * Настройка свойств фонового изображения
     */
    bgConfig: {
      fit: "cover",
    },
    /**
     * Настроить переход
     */
    transition: {
      duration: "1000ms", // Длительность анимации
      timingFun: "ease", // Скорость анимации
      delay: "0s", // Задержка анимации
    },
    // Циклическое воспроизведение
    loop: false,
    arrow: {
      // Стрелка предыдущей страницы
      last: false,
      // Следующая страница стрелка
      next: false,
    },
    // Автоматическое воспроизведение
    autoPlay: {
      play: false,
      // Интервал переключения
      interval: 1000,
    },
}