Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

nuxt-user-agent

1.2.2 • Public • Published

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
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.

Install

npm i nuxt-user-agent

DownloadsWeekly Downloads

7,731

Version

1.2.2

License

MIT

Unpacked Size

12.7 kB

Total Files

11

Last publish

Collaborators

  • avatar