목록dev-log/vue·nuxt.js (16)
H-Log
모듈 설치 yarn add -D @nuxtjs/style-resources nuxt.config에서 불러오기 { buildModules: [ '@nuxtjs/style-resources', ], styleResources: { scss: [ '@/assets/styles/_mixin.scss', '@/assets/styles/_colors.scss', ], } }
@nuxtjs/device 모듈 설치 npm i @nuxtjs/device yarn add @nuxtjs/device nuxt.config에서 모듈 추가 modules: [ '@nuxtjs/device' ], 사용 (v-if 등) $device.isDesktop $device.isMobile $device.isTablet $device.isMobileOrTablet $device.isDesktopOrTablet $device.isIos $device.isWindows $device.isMacOS $device.isAndroid $device.isFirefox $device.isEdge $device.isChrome $device.isSamsung $device.isCrawler
라이브러리 설치 npm install cookie-universal-nuxt --save nuxt.config.js modules: [ 'cookie-universal-nuxt', ], method const data = { anything: 'you want', } this.$cookies.set('thing', data, { path: '/', maxAge: 60 * 60 * 24 * 7 }); this.$cookies.get('thing');
ref에 스와이퍼의 이름을 부여해준다 @slideChange에 함수를 불러온다 함수에서는 this.$refs.mySwiper.$swiper.activeIndex 를 사용해서 현재 인덱스를 불러올 수 있다~ slideChange() { console.log(this.$refs.mySwiper.$swiper.activeIndex) }
보내는 컴포넌트 this.$nuxt.$emit('데이터통신 이름', 보낼데이터) //예시 this.$nuxt.$emit('passData', this.data) 받는 컴포넌트 this.$nuxt.$on('데이터통신 이름', 받아서사용할데이터이름 =>{ console.log(data) }) // 예시 this.$nuxt.$on('passData', info =>{ console.log(info) })