@nuxtjs/device
Device detection module for Nuxt.js
Last updated 8 months ago by devneko .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @nuxtjs/device 
SYNC missed versions from official npm registry.

@nuxtjs/device

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

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

Setup

  • Add @nuxtjs/device to depedency using yarn or npm to your project
  • Add @nuxtjs/device to modules section of nuxt.config.js
{
  modules: [
   '@nuxtjs/device',
  ]
}

Options

defaultUserAgent option can be used for npm run generate.

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

Added flags

You can use these flags to detect the device type.

context.isDesktop
context.isMobile
context.isTablet
context.isMobileOrTablet
context.isDesktopOrTablet
context.isIos
context.isWindows
context.isMacOS
context.isAndroid

instance.$device.isDesktop
instance.$device.isMobile
instance.$device.isTablet
instance.$device.isMobileOrTablet
instance.$device.isDesktopOrTablet
instance.$device.isIos
instance.$device.isWindows
instance.$device.isMacOS
instance.$device.isAndroid

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

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-

Caution

isIos, isWindows and isMacOS flags are not available with CloudFront.

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>

Ofcourse, you can use $device via this in a script.

Change a layout dynamically

export default {
	layout: (ctx) => ctx.isMobile ? 'mobile' : 'default'
}

License

MIT License

Current Tags

  • 1.2.7                                ...           latest (8 months ago)

7 Versions

  • 1.2.7                                ...           8 months ago
  • 1.2.6                                ...           9 months ago
  • 1.2.5                                ...           9 months ago
  • 1.2.4                                ...           a year ago
  • 1.2.3                                ...           a year ago
  • 1.2.2                                ...           a year ago
  • 0.0.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 336
Last Day 2
Last Week 90
Last Month 540
Dependencies (0)
None
Dev Dependencies (3)

Copyright 2014 - 2017 © taobao.org |