Pourquoi le navigateur, la fenêtre et le document ne sont-ils pas définis dans les applications Nuxt ?

Comment résoudre un navigateur, une fenêtre et un document non définis dans les applications Nuxt

Introduction

Les développeurs rencontrent souvent des erreurs où le navigateur, la fenêtre et le document restent non définis dans les applications Nuxt. Ce problème survient lorsque vous tentez d'accéder à des informations liées au navigateur telles que les informations UserAgent ou Retina.

Solution

Pour résoudre ce problème, enveloppez votre code JavaScript dans des structures spécifiques pour garantir une exécution correcte côté client uniquement.

Envelopper le code avec le hook Mounted() et process.client

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

Utiliser un composant client uniquement

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

Gérer les packages SSR non pris en charge

Pour les bibliothèques qui ne prennent pas en charge SSR lors de l'importation, envisagez d'utiliser des importations dynamiques ou directes. chargement :

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

Conseils supplémentaires

• Évitez d'emballer les composants dans si vous n'avez pas l'intention d'empêcher le rendu.
• Les importations dynamiques conviennent aux bibliothèques utilisées ultérieurement dans l'application.
• Reportez-vous à la documentation officielle de Nuxt pour plus de conseils (https://nuxtjs. org/docs/2.x/features/nuxt-components/#the-client-only-component)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!