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

fukuiretu/nuxt-user-agent

develop
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.