vue-device-detector-js

vue wrapper for device-detector-js

Installation

npm i vue-device-detector-js

Setup

Vue

//add code  to main.js 
import device from 'vue-device-detector-js'
...

Vue.use(device)

...

Nuxt

//create device.js file in /plugins dir then add code below 
import Vue from 'vue'
import device from 'vue-device-detector-js'
Vue.use(device)

//add code  to nuxt.config.js 
...

 plugins: [
  {src:'~/plugins/device'} //this line
],

...

Example

<template>
  <div>


    <div v-if="$device.isDesktop">Desktop</div>
    <div v-else-if="$device.isTablet">Tablet</div>
    <div v-else>Mobile</div>

    <div v-if="$device.os.android">Android</div>
    <div v-else-if="$device.isIOS">IOS</div>
    <div v-else-if="$device.os.windows">Windows</div>
     <div v-else-if="$device.os.windows_phone">Windows Mobile</div>
    <div v-else-if="$device.isOSx">MAc</div>

  <span v-if="$device.browser.chrome" >{{$device.browser_name}}</span>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$device.machine);
    if(this.$device.isAndroid){
      console.log("I am using an Android Device")
    }
  },
};
</script>

<style>
</style>

Access Flags

//NOTE instance.$device   (this.$device)

 $device.isMobile //boolean
 $device.isTablet  //boolean
 $device.isDesktop  //boolean

 $device.model //string eg 'iphone'
 $device.brand //string eg 'Apple'
 $device.type //string eg 'smartphone'
 $device.os_name //string eg 'iOS'
 $device.os_platform //string
 $device.os_version //string
 $device.browser_name // string eg 'Chrome'
 $device.browser_version 
 $device.browser_engine //string eg 'webkit
 $device.browser_engine_version
 
 
 //boolean
 $device.isAndroid
 $device.isBlackberry
 $device.isIOS
 $device.isWindows
 $device.isWindowsPhone
 $device.isOsx
 $device.isLinux
 $device.isChromeOs
 $device.isFireFoxOS
 $device.GamingConsole
 $device.isBot
 
 
 //boolean
 $device.os.android
 $device.os.blackberry
 $device.os.ios
 $device.os.windows
 $device.os.windows_phone
 $device.os.mac
 $device.os.linux
 $device.os.chrome
 $device.os.firefox
 $device.os.gamingConsole
 
 
  
 $device.machine.brand //string
 $device.machine.model //string
 $device.machine.os_name 
 $device.machine.os_version
 $device.machine.type  // 'smartphone' || 'Tablet' || 'Desktop'
      
  
 //boolean
 $device.browser.chrome
 $device.browser.chrome_view
 $device.browser.chrome_mobile
 $device.browser.chrome_mobile_ios
 $device.browser.safari
 $device.browser.safari_mobile
 $device.browser.msedge
 $device.browser.msie_mobile
 $device.browser.msie


 $device.client //object
 $device.detector //object
 $device.bot //object
 $device.machine //object
       
//NOTE instance.$device   (this.$device)