Digamos que tengo marcado para que se represente solo para escritorio a través de v-if.
Si es móvil, debería representar algo v-else.
Estoy usando el paquete vue-mq que permite establecer un punto de interrupción predeterminado que debe usarse para la representación del lado del servidor.
Cuando coloco 'sm' allí y cargo la página desde un escritorio, el navegador obviamente primero recibe la versión 'sm' del sitio que puede diferir de la versión 'lg'.
Por lo tanto, se produce una falta de coincidencia en la consola.
¿Cuál es la forma correcta de renderizar condicionalmente contenido html para ssr en nuxt/vuejs?
¿Alguna idea sobre cómo resolver esto correctamente sin que el usuario cargue ambas versiones de marcado (como cuando se usa v-show en lugar de v-if que resuelve la falta de coincidencia pero aumenta el uso del ancho de banda)?
Cualquier ayuda es muy apreciada.
¡Gracias!
Quieres @nuxtjs/device . Cuando una solicitud http llega a su aplicación Nuxt, este módulo inspecciona el encabezado del agente de usuario y determina si el agente de usuario (es decir, el dispositivo desde el que se originó la solicitud) es un dispositivo móvil, una tableta, una computadora de escritorio, etc. Esto sucede en el lado del servidor, antes su código del lado del cliente se ejecuta, por lo que los v-if en las plantillas se manejarán correctamente.
Por ejemplo:
v-if="$device.isMobile"