'How to fix navigator / window / document is undefined in Nuxt
I was trying to determined UserAgent and Retina info inside Nuxt application. But the application is throwing an error and showing navigatior / window is undefined. How can i get these info inside nuxt application?
const userAgent = navigator.userAgent.toLowerCase()
const isAndroid = userAgent.includes('android')
isRetina() {
let mediaQuery
if (typeof window !== 'undefined' && window !== null) {
mediaQuery =
'(-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 1.25dppx)'
if (window.devicePixelRatio > 1.25) {
return true
}
if (window.matchMedia && window.matchMedia(mediaQuery).matches) {
return true
}
}
return false
}
Solution 1:[1]
This is the solution to fix:
navigator is undefined
window is undefined
document is not defined
Here is an example on how you should wrap your logic JS code
<script>
import { jsPlumb } from 'jsplumb' // client-side library only, no SSR support
export default {
mounted() {
if (process.client) {
// your JS code here like >> jsPlumb.ready(function () {})
}
},
}
</script>
As shown here: https://nuxtjs.org/docs/2.x/internals-glossary/context
PS: mounted
+ process.client
are kinda redundant because mounted
only runs on the client.
Also, wrapping your component into <client-only>
if you want it to be only client side rendered is also a good idea.
<template>
<div>
<p>this will be rendered on both: server + client</p>
<client-only>
<p>this one will only be rendered on client</p>
</client-only>
<div>
</template>
The documentation for this one is here: https://nuxtjs.org/docs/2.x/features/nuxt-components/#the-client-only-component
PS: beware because this client-only
tag will only skip the rendering, not the execution, as explained here.
Some packages do not support SSR when you import them, for that you could either:
- use a condition with a dynamic import (if the library is meant to be used later on)
- directly like this (if you want to load a component like
vue-editor
)
export default {
components: {
[process.client && 'VueEditor']: () => import('vue2-editor'),
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 |