vue-awesome-swiper : Vue.js Typescript에서 사용 방법

화면에서 슬라이딩을 제공하는 라이브러리 vue-awesome-swiper 에 대한 포스팅입니다.

Vue.js에선 아래에 소개하는 기본 사용 방법을 활용해 바로 프로젝트에 적용할 수 있습니다. 하지만 타입스크립트가 적용된 프로젝트라면 shims-vue.d.ts 파일에 모듈 추가를 해줘야 합니다.

전체 소스 코드는 바로 아래에 있고 vue-awesome-swiper 관련 글은 그 아래에 링크로 남겨 두었습니다.

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'vue-awesome-swiper' {
  import Swiper, { SwiperOptions } from 'swiper';
  import Vue, { PluginObject, VueConstructor } from 'vue';

  interface VueAwesomeSwiper extends PluginObject<SwiperOptions> {
    Swiper: Swiper;
    swiper: VueConstructor<Vue>;
    swiperSlide: VueConstructor<Vue>;
  }

  const VueAwesomeSwiper: VueAwesomeSwiper;
  export default VueAwesomeSwiper;
  export const swiper: any;
  export const swiperSlide: VueConstructor<Vue>;

  export { default as Swiper } from 'swiper';
}