Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a Nuxt page where I need to detect if the page is opened in mobile or desktop. I have tried to use the window.innerWidth property for the detection, but it seems it is not working when putting it in the mounted() lifecycle hook.

Below is the code:

  data() {
    return {
      isMobile: false,
  mounted() {
    this.isMobile = window.innerWidth < 768;
    console.log(this.isMobile); // logs `false`
But is I put the statement inside created() lifecycle it is again throwing error as window is not defined.
My doubt is why is that? created() runs before then mounted() and also, my ESLint is showing error like "no-globals-in-created".
Please help here!
                Its in the docs, vue lifecycle -> mounted + tick has rendered dom, use await vm.$nextTick()
– Estradiaz
                Jun 30, 2020 at 10:47
You could also wrap your content in a div, and use the ref tag to access the initial clientWidth of the page, something like this:
new Vue({
  el: "#app",
  data: {
    size: null,
  computed: {
    deviceType() {
        return this.size > 760 ? 'Desktop' : 'Mobile'
  mounted() {
    this.size = this.$refs.pageSizeContainer.clientWidth
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{this.size}}px
  <div ref="pageSizeContainer" style="background: #f5f5f5;padding:15px">
    Device size is a {{this.deviceType}}
Is it required to define the isMobile value in the mounted hook? If no I would suggest that you create a computed property isMobile that returns true/false based on the innerWidth
computed: {
    isMobile() {
        return window.innerWidth < 768;
I believe that you are opening this on a desktop if you can open chrome's console so if this is the case, the problem here is that you did not setup a resize event listener along with the initial code in the mounted hook.
Something like this should work in your case:
this.isMobile = window.innerWidth < 768;
console.log(this.isMobile);
window.addEventListener('resize', () => {
  this.isMobile = window.innerWidth < 768;
  console.log(this.isMobile); // Should log true once width point is reached.
To read the window.innerWidth in the mounted hook works just as expected. And your code should work as well. Try logging the window.innerWidth value as well to see what's going on.
I created a quick sandbox where you can check it. The page loads, reads window.innerWidth and sets isMobile accordingly.
https://codesandbox.io/s/dank-tree-bgwo3
However, it only works during load of the page. It does not reevaluate when the window is resized. Just keep that in mind.
                window.innerWidth logs as 1315 value. I don't know how?  anyways, @procoib's answer solved the issue
– Yashwardhan Pauranik
                Jul 1, 2020 at 19:02
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.