CODEWITHSUNDEEP
nuxt.js
Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5566

Nuxt js - window or document is not defined

I have seen many questions related to this topic. But none of them solved my problem.

I have a situation, where I've to check the innerWidth of the window, to check if the device is mobile or not using the isMobile variable.

<div v-if="isMobile" class="stores">
   <p class="text-uppercase text-muted mb-0 mt-4">
      ...
   </p>
</div>

Below is my script code. I'm checking process.client but it is coming as false. I don't know if I've missed something which I need to add somewhere (maybe nuxt.config.js).

    data() {
      return {
        isMobile: false,
      };
    },
    mounted() {
      if (process.client) {
        console.log("Hello from the client!");
        this.isMobile = window.innerWidth < 768;
      }
      console.log('process', process.client); // Logs as false
    },

enter image description here

Upvotes: 4

Views: 7945

Answers (1)

Ejdrien
Ejdrien

Reputation: 2910

There's nothing wrong with your code. It works as it should. Let me explain.

Do you see that text in the console Nuxt SSR? It means that the output below is the result of console.log executed on the server side, not in your client. If you look in your console a little bit below this Nuxt SSR block you should see another output - either process false or process true depending on your current width of the window.

Not convinced? Try to replace that code with this and I think you'll believe me.

created() {
  if (process.client) {
    console.log("Hello from the client!")
  }
  console.log("Hello from the server... and also the client!")
}

It should output this.

enter image description here

Maybe you'd like to replace the created() function with mounted() because created() is called on both the server side and client side. And mounted() is called only on the client side when that component/page gets mounted. So that you don't have to check if process.client is true on the server side. Which will always be false so it's unnecessary to do that check.

Upvotes: 5

Related Questions