[swiper.js][vue][vite] web component 쓰면 vue warn 경고 뜰 때

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

 

swpier.js는 vue, react 버전 가이드를 따로 제공하는데 그대로 따라하다가 어느순간 보니 해당 버전들은 앞으로 버전에서는 삭제될테니 web component 형태로 쓰라고 하더라.

 

근데 자꾸 저 경고창이 뜨는데다 구글에서는 방법도 안나와서 발동동하다가 찾아냄.

 

1. vite 설정 변경

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: (tag) => tag === "swiper-container" || tag.startsWith("swiper-"),
          },
        },
      }),
    ],
    css: {},
    resolve: {},
    server: {},
  };
});

vue.config.ts 혹은 vite.config.ts 파일에 가서 plugins의 vue()안에 template이하 코드를 넣어주면 된다.

 

이렇게 하면 컴파일할때 저친구는 검사(?) 건너뛰어서 경고창이 안뜨는듯.