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!