CODEWITHSUNDEEP
vuejs3
Hasini Silva
Hasini Silva

Reputation: 344

VueJs way to detect a mobile device, when we need to render two different views, with respect to the device type

I need to change the number of elements to show in my grid view with respect to the device type. For mobile views and for desktop views. I went through so many suggetions like

and finally I ended up checking the device type inside a method.

methods: {
  isMobile() {
    if (screen.width <= 760) {
      return true
    } else {
      return false
    }
  },
},

and I used isMobile() method to define my conditon for each device. My question is how can I use this isMobile() method as computed property as I only return a boolean value. And is it ok to use like this without a even listner. Because it's so far working fine. But I'm looking for a more unified solution as I'm new to VueJs. Thanks in advance.

Upvotes: 2

Views: 13672

Answers (5)

Astro-Otter
Astro-Otter

Reputation: 873

In vue3 API composition

<template>
  <div v-if="!isMobile">Desktop</div>
  <div v-if="isMobile">Mobile</div>
</template>

<script setup>
import { computed } from "vue";

const isMobile = computed(() => {
  return screen.width <= 760;
});
</script>

Upvotes: 2

Markos F
Markos F

Reputation: 205

created() {
  window.addEventListener("resize", this.resizeHandler); // extra bonus not needed for this question.
  const orientation = window.screen.orientation.type
  if (orientation === "portrait-primary") {
    this.colwidth = 320; // example1
    this.popupWidth = "100%"; // example2
  } else if (orientation === "landscape-primary") {
    this.popupWidth = "50%";
    this.colwidth = 600;
  }

Upvotes: 0

rnewd_user
rnewd_user

Reputation: 1662

for vue3js using setup(){

<div class="mobile" v-if="isMobile()">

setup(){

  const isMobile = () => screen.width <= 760

    return {isMobile}
}

Upvotes: 1

Edouard Yonga
Edouard Yonga

Reputation: 517

You can use a created hook instead of methods, it will execute the isMobile function before the DOM loads meaning that you can identify the device type before loading the number of grids

like this:

created(){
 isMobile() {
    if (screen.width <= 760) {
      return true
    } else {
      return false
    }
  },    
}

Upvotes: 8

emoore
emoore

Reputation: 334

Great article that shows a couple of different ways to do this in JavaScript right here

Upvotes: 1

Related Questions