Nuxt custom plugin (catch window width, is Mobile)

개요

여러가지 유용할 듯한 친구들을 기록해두자

 

1. window width를 반응적으로 캐치해주는 플러그인

import { reactive } from '@nuxtjs/composition-api'

export default ({ app }, inject) => {
  const $window = reactive({
    width: 0,
  })

  if (process.browser) {
    const onResize = () => {
      $window.width = window.innerWidth
    }
    global.addEventListener('resize', onResize)
    onResize()
  }
  inject('window', $window)
}

 

2. 모바일인지 판단해주는 플러그인

import {
  isMobile
} from 'mobile-device-detect';

export default ({ app }, inject) => {
  inject('isMobile', () => {
    return isMobile
  })
}