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

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.

redmallorca/nuxt-user-agent