Mobile Detection for Vue

Detect mobile usage in Vue with screen width:

<script>
    export default {
        name: 'Init',
        methods: {
            isMobile() {
                if( screen.width <= 760 ) {
                    return true;
                }
                else {
                    return false;
                }
            }
        },
        created() {
            if (this.isMobile()) {
                this.$router.push('/MainMobile');
            }
            else {
                this.$router.push('/Main');
            }
        }
    }
</script>

With browser useragent:

methods: {
 isMobile() {
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
     return true
   } else {
     return false
   }
 }
}

With npm package (https://www.npmjs.com/package/vue-mobile-detection):

//install
npm install vue-mobile-detection

//import (global)
import VueMobileDetection from "vue-mobile-detection";
Vue.use(VueMobileDetection);

//usage
<div v-if="$isMobile()">MOBILE</div>

1 thought on “Mobile Detection for Vue”

Leave a Comment