Menu

Curso De Nuxt

Lecciones del Curso Gratuito
En este video empezamos 🤩 la serie del Curso de Nuxtjs en Español. Comenzamos viendo qué es Nuxt.js y creamos la base del proyecto con el cli create-nuxt-app. Timeline ⏳
0:00:00​ Bienvenida
0:00:56​ ¿Sobre qué va el curso?
0:04:51​ Info importante sobre Twitch
0:09:17​ Muestro la planificación y tecnologías a usar
0:13:51​ Viendo el template del diseño
0:28:59​ Revisando la funcionalidad
0:36:20​ Qué es Nuxt
0:39:58​ Creando el proyecto con el cli de nuxt
1:01:12​ Explicando estructura carpetas y routing
1:11:20​ Creamos el repositorio en GitHub
1:16:07​ Despedida 👋

Configurar STORYBOOK con NUXT y TAILWIND

En esta clase de hoy veremos cómo configurar storybook con nuxt y además cómo adaptar tailwindcss para poder usarlo con storybook y nuxt.
Timeline ⏳
0:00:00​ Bienvenida
0:00:25​ ¿Qué vamos a hacer?
0:01:23​ Empezamos con Storybook
0:12:03​ Creando componente ejemplo Storybook
0:23:32​ ¿Qué son los Addons?
0:25:15​ Configurando Tailwind con Storybook
0:39:21​ Despedida 👋

Crear DARK 🌚 MODE con NUXT y TAILWIND

Tercera clase en la que hemos creado y configurado el modo oscuro («dark mode») con #nuxt​ y el módulo @nuxtjs/color-mode y además usando tailwindcss para usar el modo oscuro de una forma más cómoda. Módulo color mode: https://color-mode.nuxtjs.org/​ Repositorio del proyecto: https://github.com/pablosirera/devmind
Timeline ⏳
0:00:00​ ¿Por qué configurar el modo oscuro primero?
0:01:34​ Instalando @nuxtjs/color-mode
0:12:38​ Creando componente ui para cambio de tema
0:21:09​ Crear lógica cambio de tema
0:23:52​ Configurar tailwind para modo oscuro
0:28:31​ Adaptar visual al modo oscuro
0:37:55​ Despedida 👋

Crear componentes base con Nuxt y Vue 

En el día de hoy veremos cómo crear componentes Vue para integrarlos posteriormente en el layout de Nuxt y crear así la base de nuestra aplicación.
Timeline ⏳
0:00:00​ Bienvenida
0:00:08​ ¿Qué vamos a hacer hoy?
0:02:28​ Crear componente Header
0:30:26​ Adaptar Header a desktop
0:41:48​ Crear componente Footer
0:48:04​ Adaptando el layout
1:03:17​ Usar componentes dinámicos con Vue
1:09:33​ Adaptar Footer a desktop
1:11:24​ Despedida 👋

Crear login page nuxt 

¡Bienvenid@s ✌️!
Vamos con la clase 5 del curso de nuxt en la que veremos cómo crear la página del login con componentes vue y añadir estilos mediante tailwindcss. Además adaptaremos el diseño a modo escritorio.
Timeline ⏳
0:00:00​ ¿Qué vamos a hacer?
0:01:45​ Crear pantalla login
0:35:00​ Crear componente dinámico
0:38:31​ Últimos retoques a la página
0:39:41​ Adaptar a tamaño desktop

Instalar y configurar FIREBASE con nuxt 

¡Bienvenid@s ✌️!
Vamos con la clase 6 del curso de nuxt.js en la que creamos un proyecto en firebase.
Timeline ⏳
0:00:00​ Explicando el módulo @nuxt/firebase
0:00:46​ Crear proyecto en Firebase 🔥
0:03:20​ Instalar y configurar módulo @nuxt/firebase

Auth con google usando firebase y nuxt 

¡Bienvenid@s ✌️!
Seguimos con la clase 7 del curso de nuxt en la que veremos cómo hacer el login con google con solamente !!2 líneas de código!!. Para hacer el login he usado el módulo @nuxt/firebase.
Timeline ⏳
0:00:00​ Adaptar componente social
0:01:13​ Crear lógica login con google
0:04:41​ Habilitar login google desde firebase
0:05:38​ Comprobando la funcionalidad del login
0:06:54​ Despedida 👋

Testing con Jest, Vue y Nuxtjs 

¡Bienvenid@s ✌️!
Esta vez hemos aprendido sobre testing en aplicaciones nuxt con vue. Vemos cómo crear nuestros primeros tests, que son los Snapshot Test, cómo organizar nuestros test y mucho más. Además veremos cómo fallar al testear la aplicación con plugins externos 🙅‍♂️
Timeline ⏳
0:00:00​ Bienvenida y repaso a cambios anteriores
0:01:39​ Repasando configuración base de los test
0:05:12​ ¿Qué es Vue Test Utils?
0:07:39​ ¿Cómo organizar los test?
0:09:04​ Escribiendo nuestro primer test
0:16:22​ Intentando solucionar error svg inline
0:35:29​ Testeando otro componente
0:39:04​ Snapshot test
0:43:35​ Simplificar inicio test
0:45:58​ Testeando pages
1:05:32​ Despedida 👋

Crear y organizar componentes de storybook con NUXT y VUE

¡Bienvenid@s ✌️!
En el día de hoy veremos cómo crear stories con storybook y organizarlas por categorías, veremos también cómo crear docs de cada storie/componente y por último instalaremos addons de storybook y los configuraremos.
Timeline ⏳
0:00:00​ Bienvenida y qué vamos a ver?
0:04:26​ Vemos estado inicial Storybook
0:08:30​ Creando componentes y organizándolos
0:52:45​ Instalando nuevos addons
1:19:22​ Despedida 👋

Registro con NUXT y FIREBASE 

¡Bienvenid@s ✌️!
En la clase de hoy, estaremos creando el apartado del registro mediante email y contraseña con firebase y nuxtjs. También vemos como hacer el login después con email y contraseña.
Timeline ⏳
0:00:00​ Bienvenida y repaso de los avances del curso
0:08:58​ Maquetar apartado registro
0:28:59​ Crear componentes ui para el formulario
1:13:18​ Funcionalidad registro con email y contraseña
1:21:23​ Actualizar datos usuario
1:31:16​ Despedida 👋

Guardar datos del usuario desde FIREBASE en VUEX

¡Bienvenid@s ✌️!
En la clase de hoy veremos en una aplicación nuxt, cómo al recuperar los datos del usuario desde firebase, crearemos nuestra estructura de datos y lo almacenaremos en vuex para tener esos datos compartidos por toda la aplicación.
Timeline ⏳
0:00:00​ Bienvenida
0:00:54​ Repaso último día
0:03:58​ ¿Qué cambios haremos hoy? Y comentando próximos cambios
0:05:12​ Crear modelo usuario
0:11:48​ ¿Qué es Vuex?
0:14:06​ Creando la store
0:16:52​ Almacenar el usuario en vuex

Crear pantalla de perfil de usuario

¡Bienvenid@s ✌️!
En la clase de hoy hemos creado la pantalla del perfil de usuario recuperando los datos desde vuex y maquetando según al diseño que tenemos en Figma.
Timeline ⏳
0:00:00​ Creando la base de la página de nuxt
0:07:05​ ¿Cómo vamos a guardar los datos en firestore?
0:08:48​ ¿Netlify o Firebase Hosting?
0:10:09​ Añadiendo el cambio de color al header
0:13:15​ Maquetando vista del detalle