Wondering what’s next for npm?Check out our public roadmap! »

    @nuxtjs/device
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    @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
    $device.isFirefox
    $device.isEdge
    $device.isChrome
    $device.isSamsung
    $device.isCrawler

    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'
      }
    }

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

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

    Data Source

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

    Keywords

    none

    Install

    npm i @nuxtjs/device

    DownloadsWeekly Downloads

    20,072

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    25.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar