Detect mobile device in Vue.js

In this tutorial, you’ll learn how to detect whether or not a user is using a mobile device in Vue.js.

You can use an npm-package called vue-mobile-detection.

Installation

npm i -S vue-mobile-detection

Not let’s add import this package to main.js file:

import VueMobileDetection from 'vue-mobile-detection'
Vue.use(VueMobileDetection)

Usage

You can now use this.$isMobile() function both in a template and in a JavaScript. It will return a Boolean value.

<template>
  <div id="app">
    <div v-if="$isMobile()">MOBILE</div>
    <div v-else>DESKTOP OR TABLET</div>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$isMobile())
  }
}
</script>

If you find this post useful, please let me know in the comments below and subscribe to my newsletter. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-detect-mobile

PS: Make sure you check other Vue.js tutorials, e.g. how to password protect your website in Vue.js, how to add current date to input type date in Vue.js, how to deploy Vue.js app to Firebase hosting.

Incoming search terms: