Awesome Open Source
Awesome Open Source

@nuxtjs/device

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.

Setup

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: [
   '@nuxtjs/device',
  ]
}

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

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.isAndroid

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

Usage

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.

{
  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: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-device

Caution

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: https://support.cloudflare.com/hc/en-us/articles/229373388-Cache-Content-by-Device-Type-Mobile-Tablet-Desktop-

License

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