Nuxt Device

Detect the type of device in your Nuxt applications.

Installation

npx nuxi@latest module add device

!NOTE You can find the Nuxt 2 version of the module on the 2.x branch.

Flags

You can use these flags to detect the device type.

$device.isDesktop
$device.isMobile
$device.isTablet
$device.isMobileOrTablet
$device.isDesktopOrTablet
$device.isIos
$device.isWindows
$device.isMacOS
$device.isApple
$device.isAndroid
$device.isFirefox
$device.isEdge
$device.isChrome
$device.isSafari
$device.isSamsung
$device.isCrawler

The user agent is also injected an accessible with $device.userAgent.

Usage

Composable

You can use the useDevice() composable inside a script setup to access the flags.

<script setup>
const { isMobile } = useDevice();
</script>

Switch a view

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

Of course, you can use $device via this in a script.

Change a layout dynamically

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

Add a custom flag

You can add other flags to $device by adding a Nuxt plugin:

// plugins/custom-flag.js
export default function ({ $device }) {
  $device.isCustom = $device.userAgent.includes('Custom-Agent') ? true : false
}

Options

defaultUserAgent option can be used when running npm run generate.

{
  modules: ['@nuxtjs/device'],
  device: {
    defaultUserAgent: 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36'
  }
}

refreshOnResize refresh flags when the window resized.(default: false)

{
  modules: ['@nuxtjs/device'],
  device: {
    refreshOnResize: true
  }
}

Note that the default user agent value is set to Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36.