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';

}

공식 사이트 : vue-awesome-swiper

데모 사이트 : Swiper component for @vuejs

설치 방법 : [ITSkeleton][nuxt.js] vue-awesome-swiper 사용하기

여기까지 vue-awesome-swiper를 Vue.js + Typescript에서 사용 방법에 대해서 알려드렸는데요. 그래도 잘 모르시겠다면 질문 내용을 댓글로 남겨주세요. 아는 범위 내에선 최대한 자세히 알려드릴게요.