Join the Nuxt Team at Frontend Nation 4-7 June.


Device detection module for Nuxt


npm versionnpm downloadsLicenseStandard JS

This module injects flags that indicate a device type into the context and the component instance.

See demo on CodeSandbox.

Setup for Nuxt3

If you use Nuxt2.x use @nuxtjs/device 2.x.

Add @nuxtjs/device to the dev dependencies using yarn or npm to your project.

yarn add --dev @nuxtjs/device
# Using npm
npm install -D @nuxtjs/device

Add it to the modules section of your nuxt.config:

  modules: [

That's it, you can now use $device in your Nuxt app ✨


You can use these flags to detect the device type.


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



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

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

Switch a view

    <div v-if="$device.isDesktop">
    <div v-else-if="$device.isTablet">
    <div v-else>

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


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


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:


MIT License

Data Source

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