[Nuxt] swiper vue 옵션 적용 문제

nuxt-swiper는 공식문서의 가이드만으로도 손쉽게 사용이 가능하다.

https://www.npmjs.com/package/nuxt-swiper

다만 공식문서에 예시로 나와있는 Module Options 외에 다른 기능을 사용하려면 조금 문제가 발생한다.

`${prefix}Autoplay` -> `SwiperAutoplay`

상기와 같이 prefix를 붙여 사용하라 명시되어있지만 실제론 동작하지 않는다.

실제로 사용하려면 :modules에 해당 기능을 추가해주고 또 그 기능을 v-bind 해줘야한다.

<Swiper
	:modules="[SwiperMousewheel]"
	:mousewheel="true"
>
	<SwiperSlide>
		{{ slide }}
	</SwiperSlide>
</Swiper>

그리고 nuxt-swiper는 swiper에 종속성을 가지기 때문에 swiper에서 Default로 제공하는 option 들은 :modules에 추가하지 않아도 된다.
string 타입으로 넘겨야하는 옵션의 경우는 작은따옴표('')로 감싸줘야 정상 동작한다.

<Swiper
	:direction="'vertical'"
>
	<SwiperSlide>
		{{ slide }}
	</SwiperSlide>
</Swiper>

또 하나의 예시로 breakpoints 같이 복합적인 옵션이 필요한 경우에도 하나씩 바인딩해줘야한다.

// 모바일 해상도에서만 `freeMode` 옵션 적용
<template>
	<Swiper
		:modules="[SwiperFreeMode]"
    	:breakpoints="swiperOption.breakpoints"
		:freeMode="swiperOption.breakpoints"
	>
		<SwiperSlide>
			{{ slide }}
		</SwiperSlide>
	</Swiper>
</template>

<script>
	export default {
    	setup() {
        	return {
    	        swiperOption: {
	                breakpoints: {
    	                1024: {
	                        freeMode: true
                    	}
                	}
            	}
        	};
        }
    }
</script>