Cómo arreglar el navegador/ventana/documento no está definido en Nuxt

Resuelto Tanvir Rahman asked hace 3 años • 1 respuestas

Estaba intentando determinar la información de UserAgent y Retina dentro de la aplicación Nuxt. Pero la aplicación arroja un error y muestra que el navegador/ventana no está definido. ¿Cómo puedo obtener esta información dentro de la aplicación Nuxt?

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
}

May 29 '21 19:05 Tanvir Rahman

Aceptado

Esta es la solución para arreglar:

navigator is undefined
window is undefined
document is not defined

Aquí hay un ejemplo de cómo debes empaquetar tu código JS lógico.

<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>

Como se muestra aquí: https://nuxtjs.org/docs/2.x/internals-glossary/context

PD: mounted+ process.clientson un poco redundantes porque mountedsolo se ejecutan en el cliente .

Además, también es una buena idea empaquetar su componente <client-only>si desea que solo se represente en el lado del cliente.

<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>

La documentación para este está aquí: https://nuxtjs.org/docs/2.x/features/nuxt-components/#the-client-only-component

PD: tenga cuidado porque esta client-onlyetiqueta solo omitirá el renderizado, no la ejecución, como se explica aquí .

Algunos paquetes no soportan SSR cuando los importas , para eso puedes hacer lo siguiente:

usar una condición con una importación dinámica (si la biblioteca se utilizará más adelante)
directamente así (si desea cargar un componente como vue-editor)

export default {
  components: {
    [process.client && 'VueEditor']: () => import('vue2-editor'),
  }
}

May 29 '2021 12:05 kissu