vue.js - Display different Vuejs components for mobile browsers

Question

I am developing an SPA using Vue 2.0. The components developed so far are for the "desktop" browsers, for example, I have

Main.vue, ProductList.vue, ProductDetail.vue,

I want another set of components for the mobile browsers, such as MainMobile.vue, ProductListMobile.vue, ProductDetailMobile.vue,

My question is, where and how do I make my SPA render the mobile version of components when viewing in a mobile browser?

Please note that I explicitly want to avoid making my components responsive. I want to keep two separate versions of them.

Thanks,

question from:https://stackoverflow.com/questions/48515023/display-different-vuejs-components-for-mobile-browsers

Answer 1

I have simple solution for Vue.js:

<div v-if="!isMobile()">
  <desktop>
  </desktop>
</div>
<div v-else>
  <mobile>
  </mobile>
</div>

And methods:

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