Awesome Open Source
Awesome Open Source


npm version npm downloads License Standard JS nuxt-device-detect Dev Token

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

See demo on CodeSandbox.


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 buildModules section of your nuxt.config:

  buildModules: [

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.


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.

  buildModules: ['@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'

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 a user-agent is Amazon CloudFront, this module checks the both headers CloudFront-Is-Mobile-Viewer and CloudFront-Is-Tablet-Viewer.

Here are the details about the headers:


isIos, 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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,104
nuxt (216
nuxtjs (120

Find Open Source By Browsing 7,000 Topics Across 59 Categories