Vue3 - Failed to resolve component: swiper-slide and swiper-container

[erkage]

Hey,

I used this tutorial: https://swiperjs.com/element#usage-with-vue
And here is a basic repro link for the problem:

https://stackblitz.com/edit/vue3-vite-swiper-warning?file=src%2FApp.vue

If you open the devtools you can see the 2 warnings from the title namely:
Failed to resolve component: swiper-slide
Failed to resolve component: swiper-container

Despite the warnings it's working both on the repro link and in my project but would be better if I can get rid of those warnings.

Thanks,
Gabor

[erkage]

After checking Swiper's code and thinking it over I realised what's going on and with that I found the solution in Vue's docs.

TLDR
As Swiper using web-components when Vue try to resolve <swiper-container> tag as a Vue component it's not exists, so you have to tell Vue to not resolve those tags.

My (Vite) config which solved the problem:

...
plugins: [
  Vue({
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag.includes('swiper')
      }
    }
  }),
],
...

[scofield-ua]

Thanks, for Nuxt 3, inside nuxt.config.js:

...

vue: {
  compilerOptions: {
    isCustomElement: (tag) => tag.includes('swiper')
  }
},

...