Nuxt.js module for handling User-Agent.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
.gitignore init Apr 13, 2018
README.md chore(README): highlight code sections Nov 25, 2018
package.json
yarn.lock Add module Apr 15, 2018

README.md

nuxt-user-agent

MIT License npm version

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

module.exports = {
  modules: [
    'nuxt-user-agent',
  ]
}

Usage

Component

asyncData
asyncData(context) {
  const deviceType = context.$ua.deviceType()
  return { deviceType }
}
methods/created/mounted/etc
methods: {
  something() {
    const deviceType = this.$ua.deviceType()
    this.deviceType = deviceType
  }
}
Store actions
// In store
{
  actions: {
    getDeviceType ({ commit }) {
      const deviceType = this.$ua.deviceType()
      commit('SET_DEVICE_TYPE', deviceType)
    }
  }
}
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 Google
isFromIphone boolean true
isFromIpad boolean true
isFromIpod boolean true
isFromIos boolean true
isFromAndroid boolean true
isFromAndroidTablet 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.