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.

How to detect mobile in JavaScript
How to detect mobile in JavaScript


npm install mobile-device-detect --save


yarn add mobile-device-detect


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:

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

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



See also

JavaScript algorithms implemented

Mobile friendly datepicker with React JS

JS video and photo gallery – blueimp