nuxt-user-agent
Nuxt.js module for handling User-Agent.
Inspired by rack-user-agent and, Thanks to woothee 🙏
Setup
Install with yarn:
yarn add nuxt-user-agent
Install with npm:
npm install nuxt-user-agent
nuxt.config.js
moduleexports = modules: 'nuxt-user-agent' Usage
Component
asyncData
{ const deviceType = context$ua return deviceType }methods/created/mounted/etc
methods: { const deviceType = this$ua thisdeviceType = deviceType }Store actions
// In store actions: { const deviceType = this$ua } template
<template> <section> <div v-if="$ua.isFromPc()"> <span>PC</span> </div> <div v-if="$ua.isFromSmartphone()"> <span>Smartphone</span> </div> <div v-if="$ua.isFromMobilephone()"> <span>Mobilephone</span> </div> <div v-if="$ua.isFromTablet()"> <span>Tablet</span> </div> <div v-if="$ua.isFromAppliance()"> <span>Appliance</span> </div> <div v-if="$ua.isFromCrawler()"> <span>Crawler</span> </div> </section></template>Methods
| method | type | example |
|---|---|---|
| deviceType | string | pc |
| os | string | Mac OSX |
| osVersion | string | 10.12.6 |
| browser | string | Chrome |
| browserVersion | string | 65.0.3325.181 |
| browserVendor | string | |
| isFromIphone | boolean | true |
| isFromIpad | boolean | true |
| isFromIpod | boolean | true |
| isFromIos | boolean | true |
| isFromAndroidMobile | boolean | true |
| isFromAndroidTablet | boolean | true |
| isFromAndroidOs | boolean | true |
| isFromWindowsPhone | boolean | true |
| isFromPc | boolean | true |
| isFromSmartphone | boolean | true |
| isFromMobilephone | boolean | true |
| isFromAppliance | boolean | true |
| isFromCrawler | boolean | true |
| isFromTablet | boolean | true |
TODO
- unit test
License
The npm is available as open source under the terms of the MIT License.