Skip to content
This repository has been archived by the owner on Jul 6, 2023. It is now read-only.

Latest commit

 

History

History
142 lines (116 loc) · 3.89 KB

README.md

File metadata and controls

142 lines (116 loc) · 3.89 KB

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.