Nuxt3에서 Mobile device Check 방법

Frontend 개발시에 Device 종류를 알아야 하는 경우가 있습니다.
예를들면, Device 종류가 Mobile 인지 PC 인지에 따라 CSS를 다르게 처리하는 등의 일입니다.

 

이때 device를 알기 위해서는 @nuxtjs/device 라는 패키지를 사용합니다.

Nuxt3에서 @nuxtjs/device의 셋팅 방법과 사용방법에 대해 알아봅니다.

 

@nuxtjs/device 패키지 설치

npm 또는 yarn으로 @nuxtjs/device 패키지를 설치합니다.

# npm 사용시
npm install @nuxtjs/device

# yarn 사용시
yarn add @nuxtjs/device

 

nuxt.config.ts 설정

modules에 @nuxtjs/device를 추가하고, device 설정을 추가합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/device'],
  
  // 기본 device 설정
  device: {
    refreshOnResize: true,  // 창 크기 변경시 디바이스 감지 새로고침
    defaultUserAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36',  // 기본 User Agent
    detectOnInitialize: true  // 초기화시 디바이스 감지
  }
})

 

플러그인 생성

plugins 폴더에 device.ts 파일을 생성합니다.

export default defineNuxtPlugin((nuxtApp) => {
  const device = useDevice()

  // 디바이스 정보를 전역 상태로 관리하고 싶을 때
  const deviceStore = useState('device', () => ({
    isMobile: device.isMobile,
    isTablet: device.isTablet,
    isDesktop: device.isDesktop,
    userAgent: device.userAgent
  }))

  return {
    provide: {
      deviceInfo: deviceStore
    }
  }
})

 

사용 방법

device 정보를 가져올 Vue 소스에서 deviceInfo를 선언합니다.

const { $deviceInfo } = useNuxtApp();

 

$deviceInfo.isMobile 을 사용하여 mobile 여부를 체크할 수 있습니다.

<div class="mobile-css" v-if="$deviceInfo.isMobile"/>