This article summarizes how to detect whether the user is using a smartphone or Android in Vue.

⇨ Click here for the table of contents of Vue articles

Conclusion

export default {
  methods: {
    test() {
      if (this.isMobile()) {
        console.log("Smartphone")
      } else {
        console.log("Not a smartphone")
      }
    },
    isMobile() {
      var userAgent = window.navigator.userAgent.toLowerCase()
      if (
        userAgent.indexOf("iphone") != -1 ||
        userAgent.indexOf("ipad") != -1 ||
        userAgent.indexOf("android") != -1 ||
        userAgent.indexOf("mobile") != -1
      ) {
        return true
      } else {
        return false
      }
    },
  },
}

Device detection is based on userAgent

    isMobile() {
      var userAgent = window.navigator.userAgent.toLowerCase
      console.log(userAgent)
    }

By checking this way in the console, you can see which user agent string is being used.

Using indexOf, we tried to determine whether it is a smartphone or not based on "is this string being used".

Installing a package is also an option

If you want to distinguish between "PC" and "smartphone" in Nuxt, the following package is recommended

@nuxtjs/device

If you want to branch out devices more finely in Nuxt

nuxt-user-agent

Detection is also possible in JavaScript

Not only in Vue but also in JavaScript, you can use

var userAgent = window.navigator.userAgent.toLowerCase()

to retrieve the user agent string.

Summary

That's all.

I hope it can be helpful for someone.

If you have complaints or corrections, please feel free to DM me on Twitter below.

Thank you and goodbye!