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, { PluginObjectVueConstructor } from 'vue';

  interface VueAwesomeSwiper extends PluginObject<SwiperOptions> {
    SwiperSwiper;
    swiperVueConstructor<Vue>;
    swiperSlideVueConstructor<Vue>;
  }

  const VueAwesomeSwiperVueAwesomeSwiper;
  export default VueAwesomeSwiper;
  export const swiperany;
  export const swiperSlideVueConstructor<Vue>;

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

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



댓글(2)

  • 2021.05.22 00:57 신고

    안녕하세요 vue + typescript로 vue-awesome-swiper 를 사용해보려 하는 학생입니다. 다름이 아니라 vue 3.0에서도 vue-awesome-swiper가 사용 가능한가요....???? vue 3.0을 쓰고 있는데 도무지 어떤 식으로 vue-awesome-swiper를 사용해야할지 막막해서 이렇게 댓글 달게 되었습니다 ㅠ...

    • 2021.05.22 12:54 신고

      네. 제가 뷰3.0+타입스크립트로 사용했고, 사용법은 구글에서 검색하면 예제가 많이 나옵니다.

Designed by JB FACTORY