Learn Nuxt with a Collection of 100+ Tips!

device

Device detection module for Nuxt

Nuxt banner

Nuxt Device

npm version npm downloads License Nuxt

Detect the type of device in your Nuxt applications.

See demo on CodeSandbox.

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.

CloudFront Support

If the user-agent is Amazon CloudFront, this module checks the following headers :

  • CloudFront-Is-Mobile-Viewer
  • CloudFront-Is-Tablet-Viewer
  • CloudFront-Is-Desktop-Viewer
  • CloudFront-Is-Ios-Viewer
  • CloudFront-Is-Android-Viewer

Here are the details about the headers:
Amazon CloudFront - Headers for determining the viewer's device type

Caution

isWindows and isMacOS flags are not available with CloudFront.

Cloudflare Support

This module checks the header CF-Device-Type.

Here are the details about the header: https://support.cloudflare.com/hc/en-us/articles/229373388-Cache-Content-by-Device-Type-Mobile-Tablet-Desktop-

License

MIT License

Data Source

This module uses crawler-user-agents to generate the regular expression that detect a crawler.