Descargar como PDF, PPTX
Nuxt Avanzado (de Scaffolding a MVP)
- 1.
- 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 eInyecció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 VISTASAUTOMÁ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 • Nuxtgenera 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 YSEO • 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ónde 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 PARAUN 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.