Drücke „Enter”, um zum Inhalt zu springen.

Display different Vuejs components in mobile browsers


Let’s suppose that I have the Main.vue and the MainMobile.vue. I will add an Init.vue that will redirect. So my router/index.js is that:

import Router from 'vue-router'
import Vue from 'vue'
import Main from '@/components/Main'
import MainMobile from '@/components/MainMobile'
import Init from '@/components/Init'


export default new Router({
  routes: [
        path: '/',
        name: 'Root',
        component: Init
      path: '/Main',
      name: 'Main',
      component: Main
      path: '/MainMobile',
      name: 'MainMobile',
      component: MainMobile

At the Init.vue file, the mobile/desktop detection will happen:

    export default {
        name: 'Init',
        methods: {
            isMobile() {
                if( screen.width <= 760 ) {
                    return true;
                else {
                    return false;
        created() {
            if (this.isMobile()) {
            else {
<style scoped>

The isMobile() function used is very simple, you can change to any other.

Schreibe einen Kommentar