nuxt.js에서 디바이스 타입 체크(감지)하는 방법(detect device)

nuxt.js에서 디바이스 타입(iOS, android, macOS, windows)에 따라서 분기처리를 해야될 경우가 생길 수 있습니다. 이때  nuxt.js에서 디바이스 타입을 체크하는 방법은 @nuxtjs/device 모듈을 활용하면 간단하게 처리 가능합니다. @nuxtjs/device 모듈은 서버/클라이언트에서 굉장히 손쉽게 디바이스를 체크할 수 있도록 도와줍니다.

설치방법

yarn이나 npm을 활용해서 @nuxtjs/device 모듈을 설치합니다.

npm i @nuxtjs/device
// or
yarn add @nuxtjs/device

nuxt.config.js에서 modules에 @nuxtjs/device를 추가합니다.

// nuxt.config.js
{
  modules: [
   '@nuxtjs/device',
  ]
}

사용방법

기본적으로 context에서 아래와 같이 활용할 수 있습니다. 서버 사이드, 클라이언트 사이드 모두 활용할 수 있고, modules 단계에서도 디바이스 타입을 체크할 수 있습니다.

context.isDesktop
context.isMobile
context.isTablet
context.isMobileOrTablet
context.isDesktopOrTablet
context.isIos
context.isWindows
context.isMacOS
context.isAndroid
 
instance.$device.isDesktop
instance.$device.isMobile
instance.$device.isTablet
instance.$device.isMobileOrTablet
instance.$device.isDesktopOrTablet
instance.$device.isIos
instance.$device.isWindows
instance.$device.isMacOS
instance.$device.isAndroid

디바이스 타입에 따라서 레이아웃을 동적으로 변경할 때에도 활용할 수 있습니다.

export default {
    layout: (ctx) => ctx.isMobile ? 'mobile' : 'default'
}

vue 템플릿 내부에서도 활용할 수 있습니다.

<template>
    <section>
        <div v-if="$device.isDesktop">
            Desktop
        </div>
        <div v-else-if="$device.isTablet">
            Tablet
        </div>
        <div v-else>
            Mobile
        </div>
    </section>
</template>