Home / Questions / 478262
Accepted
Agustin G.
Asked: 2022-08-21 06:59:52 +0800 CST 2022-08-21 06:59:52 +0800 CST

Get browser and device data in Vue 3

  • 772

Edit 24/8 - I'm going to bounty this question to see if someone can explain to me how to override this function, so it works globally in Vue 3.

const device = {
    install(Vue, options) {
        Vue.prototype.$device = devices()
    }
}

The answer that I published myself, although it served me to fulfill the intended purpose, requires moving some files. I would like to be able to modify the plugin to work globally, making use of app.use(directive)in my main.js.

As the question says, I want to get user data. This is because I want to apply a cssdifferent en android chrome, since the address bar occupies part of the screen and the entire site is not visible.

I tried with plugin https://www.npmjs.com/package/vue-device-detector-js

I get the following error:

Uncaught TypeError: Cannot set property '$device' of undefined
at Object.install (index.js:90)
at Object.use (runtime-core.esm-bundler.js:4136)
at eval (main.js:50)
at Module../src/main.js (app.js:7989)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:8758)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)
at app.js:925

This is the plugin code, in case someone could find a way to make Vue 3 not have the error with the variable$device

import DeviceDetector from "device-detector-js";
import BotDetector from "device-detector-js/dist/parsers/bot";


const deviceDetector = new DeviceDetector();
const detector = deviceDetector.parse(window.navigator.userAgent);
const botDetector = new BotDetector();
const bot = botDetector.parse(window.navigator.userAgent);

function devices() {

    return {

        isMobile: detector.device.type == "smartphone",
        isTablet: detector.device.type == "tablet",
        isDesktop: detector.device.type == "desktop",

        model: detector.device.model,
        brand: detector.device.brand,
        type: detector.device.type,
        os_name: detector.os,
        os_platform: detector.os.platform,
        os_version: detector.os.version,
        browser_name: detector.client.name,
        browser_version: detector.client.version,
        browser_engine: detector.client.engine,
        browser_engine_version: detector.client.engineVersion,

        browser: {
            chrome: detector.client.name == "Chrome",
            chrome_view: detector.client.name == "Chrome Webview",
            chrome_mobile: detector.client.name == "Chrome Mobile",
            chrome_mobile_ios: detector.client.name == "Chrome Mobile iOS",
            safari: detector.client.name == "Safari",
            safari_mobile: detector.client.name == "Mobile Safari",
            msedge: detector.client.name == "Microsoft Edge",
            msie_mobile: detector.client.name == "IE Mobile",
            msie: detector.client.name == "Internet Explorer"
        },

        os: {
            android: detector.os.name == "Android",
            blackberry: detector.os.name == "BlackBerry OS",
            ios: detector.os.name == "iOS",
            windows: detector.os.name == "Windows",
            windows_phone: detector.os.name == "Windows Phone",
            mac: detector.os.name == "Mac",
            linux: detector.os.name == "GNU/Linux" || detector.os.name == "GNU\/Linux",
            chrome: detector.os.name == "Chrome OS",
            firefox: detector.os.name == "Firefox OS",
            gamingConsole: detector.os.name == "Gaming Console"
        },

        isAndroid: detector.os.name == "Android",
        isBlackberry: detector.os.name == "BlackBerry OS",
        isIOS: detector.os.name == "iOS",
        isWindows: detector.os.name == "Windows",
        isWindowsPhone: detector.os.name == "Windows Phone",
        isOsx: detector.os.name == "Mac",
        isLinux: detector.os.name == "GNU/Linux" || detector.os.name == "GNU\/Linux",
        isChromeOs: detector.os.name == "Chrome OS",
        isFireFoxOS: detector.os.name == "Firefox OS",
        GamingConsole: detector.os.name == "Gaming Console",
        isBot: bot,



        machine: {
            brand: detector.device.brand,
            model: detector.device.model,
            os_name: detector.os.name,
            os_version: detector.os.version,
            type: detector.device.type,
        },
        bot: bot,
        client: detector.client,
        device: detector.device
    }


}

const device = {
    install(Vue, options) {
        Vue.prototype.$device = devices()
    }
}


export default device
javascript

3 Answers

  1. I finally solved it as follows:

    Having installed the plugin ( https://www.npmjs.com/package/vue-device-detector-js ), I copied the contents of /node_modules/vue-device-detector-js/index.jsand saved it to a local file in .src/utils/detect-device.js. (I left the .ts dependencies in the folder /node_modules, where they already were).

    Then in this new file .src/utils/detect-device.jsI modified this code (deprecated for vue 3)

    const device = {
    install(Vue, options) {
        Vue.prototype.$device = devices()
    }
}

    along this line

    const device = devices()

    Now in App.vueimport the.js

    import device from './utils/detect-device'

    And I can already use it in the component:

      onMounted(() => {
      console.log(`Modelo: ${device.model} - marca: ${device.brand}`)
      console.log(`Navegador: ${device.browser_name} - version: ${device.browser_version}`);
      console.log(`Es movil?: ${device.isMobile} - Es android? ${device.isAndroid} - Es iOS?: ${device.isIOS}`)
      console.log(`isChromeOS? - ${device.isChromeOs}`)
      console.log(`SO android? ${device.os.android} - windows? ${device.os.windows} - mac? ${device.os.mac}`)
    });

    EXTRA:

    I understand that the correct thing would be to replace

    const device = {
    install(Vue, options) {
        Vue.prototype.$device = devices()
    }
}

    For the correct way for Vue 3 which modifies the globalOptions. Since I don't understand the framework to do this that deeply, instead of using it globally, I brought it in as a local object and it served its purpose just fine.

    • 4

  2. I use this function that I made in vanilla javascript so you can use it with the framework of your choice

    function getOS () {

  const isThere = 'navigator' in window;
  let os = "";
  const userAgent = isThere && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
  const vendor = isThere && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
  const appVersion = isThere && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';
  const platform = isThere && 'platform' in navigator && navigator.platform.toLowerCase() || '';

  if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) os = 'ios';
  if (/android/i.test(userAgent)) os = 'android'
  if (/win/i.test(appVersion) && /phone/i.test(userAgent)) os = 'windowsPhone'
  if (/mac/i.test(appVersion)) os = 'MacOSX'
  if (/win/i.test(appVersion)) os = 'windows'
  if (/linux/i.test(appVersion)) os = 'linux'

  return {
    os,
    userAgent,
    vendor,
    appVersion,
    platform,
  }
}
    • 4
  3. Best Answer

    When you create a plugin in Vue 3 there needs to be an object that has the function install.

    Let's say your plugin is called Device, your plugin can be created like this:

    // device.js
export default {
  install (app) {
    app.provide('device', 'world')

    // Tambien puedes usar `config.globalProperties`
    // y `device` esta disponible usando `this.device`
    // pero veo que usas la API de composición, por lo que
    // creo que queda mejor usar `provide`
    // en otro caso puedes usar la siguiente linea
    // app.config.globalProperties.device = 'world'
  }
}

    // main.js
import { createApp } from 'vue'
import App from './App.vue'
import Device from './device'

createApp(App)
  .use(Device)
  .mount('#app')

    And you just use it in a component:

    <template>
  hello {{ device }}
</template>

<script>
import { inject } from 'vue'

export default {
  setup () {
    const device = inject('device')

    // lo usas en un computed, watch etc...

    return { device }
  }
}
</script>

    In my case deviceit is a simple 'world', but a function, an object, or anything else can go there, in your case the function devices().

    You can find these 2 ways to add them in the doc:

    • 2