[Vuejs]-Window is not defined in nuxt js

by

0👍

Nuxt uses server-sided rendering. This means that when your code is being executed on the server, it does not have something like window. After all, it is not a browser.

The easiest way around this is by wrapping anything that should not be pre-rendered to html, with something like vue-no-ssr. This particular library renders a dummy component on the server, then actually renders the component when it gets to the browser.

0👍

Yes window doesn’t exist during the mounted lifecycle hook. I assume you’re trying to place something based on its position?

In that case, you might be able to utilize CSS to do it for you. You can place elements using the View Height/View Width units. Combine that with CSS calc() and you might get the solution you need.

Example:

.element {
  /* make element positon relative to the window */
  position: fixed;
  /* set position - note vw/vh are % of window */
  /* this put the top of your element -200px from the bottom of your window */
  top: calc(100vh - 200px);
}

If you’re doing something more complex, using Javascript’s element.getBoundingClientRect() will likely provide what you need. See this answer for more info.

Leave a comment