1

Хочу подключить swiperjs по официальной инструкции - swiperjs.com

Вот код моего IndexView.vue

<template>
    <swiper-container
        :slides-per-view="2"
        :space-between="20"
        :centered-slides="false"
        :breakpoints="{
            768: {
                slidesPerView: 3,
            },
            768: {
                slidesPerView: 4,
            },
            1200: {
                slidesPerView: 6,
                spaceBetween: 76,
            }
        }"
        :navigation="{
            nextEl: '.next',
            prevEl: '.prev',
        }"
    >

        <swiper-slide class="swiper-slide">
            <a href="#" class="logos-section" target="_blank">
                <img src="@/assets/img/content/logo-1.png" alt="" class="imgage-logo">
            </a>
        </swiper-slide>

        ....

    </swiper-container>
</template>

<script>
    import { register } from 'swiper/element/bundle';
    register();

    export default {
    }
</script>

и он работает так как и нужно. но меня очень сильно смущают сообщения в консоли браузера:

[Vue warn]: Failed to resolve component: swiper-slide If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Vue warn]: Failed to resolve component: swiper-container If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

введите сюда описание изображения

Буду очень благодарен за помощь!

2

2 ответа 2

1
+100

Для решения данной задачи нужно создать функцию согласно документации:

isCustomElement = tag => tag.startsWith('swiper-')

Прописывается это в файле vite.config.js согласно обсуждению на гитхабе:

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith('swiper-')
      }
    }
  })], ...
})

Таким образом любой элемент начинающийся со swiper- будет считаться кастомным, два получаемых Вами сообщения указывают именно на эту настройку в app.config

Идея этой функции что она возвращает boolean значение в зависимости от результата выполнения, принимает имя тега как параметр (строку) и далее Вы можете написать любой сложный код который может обслуживать сразу несколько тегов? а не только один начинающихся на swiper-

Можно например так обработать сразу список кастомных тегов:

isCustomElement = tag => 
  ['swiper-slide', 'another-tag', 'my-custom'].includes(tag)

Так же, скорее всего, потребуется установить плагин:

npm install @vitejs/plugin-vue -S -D
0

При использовании компонентов они должны быть явно импортированы в шаблон или установлены глобально в файле main.js

Для решения конкретной проблемы можно попробовать импортировать их в ваш шаблон в блоке script:

import { Swiper, SwiperSlide } from 'swiper/vue';

export default {
  name: 'MyComponent',
  components: {
    Swiper,
    SwiperSlide,
  },
}

В официальной документации так же есть пример с импортом в шаблоне: ссылка на пример из документации

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.