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>
Thank you !
Thank thing was absolutely useful !
Used the user agent version.