Detect mobile in JavaScript – Vue.js example

Detect mobile in JavaScript with `mobile-device-detect`.

Detect mobile in JavaScript / Vue.js / es6

Sometimes we may need to `know` at JS code level, whether our application is running on mobile, tablet, or maybe on desktop browser? There is a simple way to handle that. Meet `mobile-device-detect` – a great solution to detect mobile device and its type, with helpers for handling mobile devices in JavaScript.

Setup

npm install mobile-device-detect --save

or

yarn add mobile-device-detect

Usage

import { isMobile } from 'mobile-device-detect';
export default {
  name: 'HelloDevices',
  data () {
    return {
      msg: isMobile ? 'Welcome to our Mobile App!' : 'Hello on Desktop!'
    }
  }
}

Show result in a template:

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

For React JS there is a dedicated library: `react-device-detect`.

There is a rich set of selectors we can use. See below:

– isMobile

– isMobileOnly

– isTablet

– isBrowser

– isSmartTV

– isWearable

– isConsole

– isAndroid

– isWinPhone

– isIOS

– isChrome

– isFirefox

– isSafari

– isOpera

– isIE

– isEdge

– isYandex

– isChromium

– isMobileSafari

– osVersion

– osName

– fullBrowserVersion

– browserVersion

– browserName

– mobileVendor

– mobileModel

– engineName

– engineVersion

– getUA

– deviceDetect

License: MIT

Homepage / GitHub

https://github.com/duskload/mobile-device-detect

See also

JavaScript algorithms implemented

Mobile friendly datepicker with React JS

JS video and photo gallery – blueimp

Enjoy!