nua

nuxt-user-agent

Nuxt.js module for handling User-Agent.

Showing:

Popularity

Downloads/wk

9K

GitHub Stars

111

Maintenance

Last Commit

2yrs ago

Contributors

5

Package

Dependencies

1

Size (min+gzip)

1.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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

methodtypeexample
deviceTypestringpc
osstringMac OSX
osVersionstring10.12.6
browserstringChrome
browserVersionstring65.0.3325.181
browserVendorstringGoogle
isFromIphonebooleantrue
isFromIpadbooleantrue
isFromIpodbooleantrue
isFromIosbooleantrue
isFromAndroidMobilebooleantrue
isFromAndroidTabletbooleantrue
isFromAndroidOsbooleantrue
isFromWindowsPhonebooleantrue
isFromPcbooleantrue
isFromSmartphonebooleantrue
isFromMobilephonebooleantrue
isFromAppliancebooleantrue
isFromCrawlerbooleantrue
isFromTabletbooleantrue

TODO

  • unit test

License

The npm is available as open source under the terms of the MIT License.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100