nuxt-user-agent

nuxt-user-agent

Nuxt.js module for handling User-Agent.

Inspired by rack-user-agent and, Thanks to woothee :pray:

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

TODO

• unit test

License

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