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,

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    }  } } 

Answer 2

I have an idea, use a [mixin][1] which detects if the browser is opened on mobile or desktop (example for js code in this [answer][2] ).. then use v-if, for example

<production-list v-if="!isMobile()"></production-list> <production-list-mobile v-else></production-list-mobile> 

so here is an example on https://jsfiddle.net/Ldku0xec/ [1]: https://vuejs.org/v2/guide/mixins.html [2]: Detecting a mobile browser