Почему в консоли выдает "Failed to resolve component: swiper-slide"

Question

Хочу подключить 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.

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

Answer 1

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

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

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

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

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

Answer 2

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

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

БЛОГ НА HUSL

Почему в консоли выдает "Failed to resolve component: swiper-slide"

Ответы (2 шт):