Nuxt es el framework modular, orientado a rendimiento y a Experiencia de Desarrollador de VueJS. Permite tanto el Renderizado en Servidor (SSR) como la generación de sitios estáticos (sin necesidad de servidor) y la generación de una Single Page Application con baterías incluidas. En este evento profundizaremos en ir un poco más allá de los primeros pasos con Nuxt para ver cómo crear nuestro propio MVP con la integración de Nuxt Firebase como backend con Firestore como base de datos y Firebase Authentication como sistema de autenticación de usuarios.

1. NUXT
AVANZADO
(DESCAFFOLDING
AMVP)
@RAFAEL_CASUSO ALEXANDER LONDON

2. NUXTA
QUEMARROPA
WILMER MARTÍNEZNUXT AVANZADO (DE SCAFFOLDING A MVP)

3. ¿QUÉ ES NUXT?
• Framework de Aplicación sobre VueJS con con
fi
guración prede
fi
nida y
estandarización
CARACTERÍSTICAS
• Sistema de Vistas Anidadas Automatizadas
• Renderización:
• Server-Side Rendering
• Static Site
• Single Page Application
• Enrutado Automático basado en estructura de archivos
• Estructura de Aplicación Estandarizada y Predecible
NUXT AVANZADO (DE SCAFFOLDING A MVP)

4. • Con
fi
guración e Inyección de Gestión de Estado Automática
• Meta Tags y SEO
• Data Fetching por Page y Component
• Transiciones a nivel Page
• Gestión del Loading
• Con
fi
guración General del Framework centralizada
• Ecosistema de Módulos en https://modules.nuxtjs.org/
NUXT AVANZADO (DE SCAFFOLDING A MVP)

5. RENDERIZACIÓN
• Server-Side Rendering
• Es el modo por defecto
• Renderización en Servidor (Acceso a Request y Response) e
Hidratación en Cliente (convirtiéndose en Aplicación)
• Requiere un Hosting que permita Servidor Node (Heroku, AWS, etc)
• Generación de Sitio Estático
• Renderización en Build time con destino a dist
• Puede servirse en cualquier Hosting estático (Firebase, Netlify, etc)
• Single-Page Application
• Renderización total en Cliente
NUXT AVANZADO (DE SCAFFOLDING A MVP)

6. SISTEMA DE VISTAS AUTOMÁTICO
• Layout/s
• Componente Vue que enmarca la vista de una o varias Pages
• Puede ser global o especí
fi
co por Page
• Deben incluir el componente Nuxt donde se renderizan las Pages
• Pages
• Componentes Vue con Atributos Especiales: AsyncData, Fetch, Head,
Layout, Loading, Transition, ScrollToTop, Middleware
• Components
• Componentes Vue con acceso a algunos Atributos Especiales como
Fetch
NUXT AVANZADO (DE SCAFFOLDING A MVP)

7. ENRUTAMIENTO AUTOMÁTICO
• Nuxt genera automáticamente la con
fi
guración de Enrutación (Vue-
Router) en base a la estructura de archivos del directorio Pages
• Genera automáticamente Code-Splitting sin con
fi
guración
• Las rutas dinámicas se generan con un _ delante del nombre del
componente
• Los parámetros y query strings se inyectan automáticamente en los
componentes
• ProTip:
• Puedes usar _.vue en cualquier nivel de enrutamiento para capturar
rutas desconocidas
NUXT AVANZADO (DE SCAFFOLDING A MVP)

8. META TAGS Y SEO
• Puedes de
fi
nir Meta Tags a nivel Global en nuxt.con
fi
g.js
• También puedes hacerlo especí
fi
cos por Page en el atributo Head
• Permite cargar recursos externos en los atributos Script y Link de Head
tanto a nivel Global como por Page
NUXT AVANZADO (DE SCAFFOLDING A MVP)

9. DATA FETCHING
• Recuperación de Datos Universal
• Fetch es un hook con acceso al Contexto que se llama:
• En SSR tras la creación del componente antes del renderizado de la Page
• En Cliente tras la navegación una vez el componente es mounted
• AsyncData es un hook
• Se resuelve durante la transición de Rutas ante de la navegación a la
siguiente Page
• Mergea su resultado con el Local State del componente
• ProTip:
• Puedes usar ‘keep-alive’ como atributo del componente Nuxt para
cachear y evitar llamadas fetch al navegar a páginas ya visitradas
NUXT AVANZADO (DE SCAFFOLDING A MVP)

10. MVP
CONNUXT
JOSH HILDNUXT AVANZADO (DE SCAFFOLDING A MVP)

11. ¿QUÉ NECESITAMOS PARA UN MVP?
• Requisitos habituales mínimos:
• Autenticación
• Persistencia
• Analítica
• Hosting
• Opcionalmente:
• Almacenamiento
• Mensajería
NUXT AVANZADO (DE SCAFFOLDING A MVP)

12. • Autenticación
• Persistencia
• Analítica
• Hosting (Static Deployment)
• Almacenamiento
• Mensajería
NUXT AVANZADO (DE SCAFFOLDING A MVP)

13. • Inyecta $
fi
re (a partir de la versión 7) con acceso a todos los servicios
• Vuex
fi
re permite sincronizar con un binding bidireccional la Gestión de
Estado y su Persistencia en FireStore.
• FirebaseUI debe con
fi
gurarse por separado ya que es una librería
cliente para dar interfaz automática al sistema de autenticación
NUXT AVANZADO (DE SCAFFOLDING A MVP)

14. REALIDAD
VIRTUAL
URIEL SOBERANESNUXT AVANZADO (DE SCAFFOLDING A MVP)

15. NUXT
AVANZADO
(DESCAFFOLDING
AMVP)
@RAFAEL_CASUSO KEVIN LAMINTO