Convirtiendo en reactivas las API del DOM
Aprende a utilizar la API de Intersection Observer en Vue con TypeScript convirtiendo su implementación en un composable reutilizable
Juan Andrés NúñezDEVTIPS
Acerca de JavaScript, Vue y su ecosistema
Tutoriales dedicados a un único concepto, tecnología o herramienta
Juan Andrés NúñezCómo tipar scoped slots con defineSlots
Cómo usar TypeScript con scoped slots gracias a la nueva macro defineSlots de Vue 3.3>
Juan Andrés NúñezEntendiendo await, return await y return
Descubre cuándo usar await, return y return await en funciones async de JavaScript para mejorar la legibilidad, depuración y manejo de errores.
Juan Andrés NúñezLa información sin acción, es ruido
No necesitas más información. No necesitas estar al tanto de todo. Solo aquello que puedas utilizar aquí y ahora merece toda tu atención.
Juan Andrés NúñezCómo crear breakpoints CSS reactivos con Composition API
Aprende cómo hacer reactivos tus puntos de ruptura CSS para que puedas reaccionar cuando muten
Juan Andrés NúñezTop 3 errores trabajando con la Composition API
Tres errores comunes al usar la API de Composición en Vue.js, explicando qué son, por qué ocurren y cómo solucionarlos
Juan Andrés NúñezCómo (y cuándo) compartir propiedades reactivas en los composables
Aprende la diferencia entre las funciones compositoras stateless y stateful de Vue 3
Juan Andrés NúñezCómo usar la macro defineModel de Vue 3
defineModel (Vue 3.4) simplifica el trabajo con múltiples bindings entre componentes usando v-model
Juan Andrés NúñezRenderizado condicional de slots
Aprender a renderizar slots en base a una condición con la Composition API de Vue 3
Juan Andrés NúñezCómo desestructurar reactive sin perder la reactividad
Por defecto no puedes usar el operador spread para desestructurar objetos reactivos creados con Vue 3 reactive API. En este tip te explicaré cómo usar los helpers toRef y toRefs para poder desestructurar reactive sin perder la reactividad
Juan Andrés NúñezIntroducción a Pinia y Vue 3
Da los primeros pasos con Pinia y Vue 3 utilizando la Composition API. Pinia permite compartir estado sin la complejidad de Vuex. Es una librería ligera, extensible y modular.
Juan Andrés NúñezMúltiple v-model con Vue 3
Con Vue 3 y su Composition API puedes usar varios v-model en tus componentes. Cada v-model Vue 3 se sincroniza con una propiedad diferente, simplificando el proceso de comunicación reactiva entre componentes
Juan Andrés NúñezCómo usar estilos CSS reactivos con Vue 3
Aprende a usar v-bind CSS con Vue 3 para crear estilos reactivos como variables CSS. Puedes hacer uso de esta característica si usas Single File Components y la sintaxis script setup
Juan Andrés NúñezSelectores CSS especiales en Vue 3
Aprende a usar algunos selectores CSS especiales de Vue 3 como deep, slotted y global. Puedes utilizarlos en tus bloques de estilos scoped, resultando una combinación muy potente.
Juan Andrés NúñezArgumentos flexibles Composables
Con las funciones isRef y unref de Vue 3 puedes crear argumentos flexibles, es decir, permitir usar valores reactivos o no, haciendo que tu código mucho más reutilizable y polivalente
Juan Andrés NúñezTu primer Composable en Vue 3
El patrón de composición (composable) es una de las novedades más interesantes que nos trae la API de Composición de Vue 3. Nos permite usar la reactividad fuera de componentes, de forma sencilla. Algo impensable hasta ahora.
Juan Andrés NúñezMejora el rendimiento con v-once
Con la directiva v-once de Vue 3 puedes tratar parte de contenido como estático a partir de la primera carga. Vue 3 v-once puede influir positivamente en el rendimiento general de tu aplicación, así que es una pequeña técnica que debes conocer
Juan Andrés NúñezLazy-load con IntersectionObserver API y Vue 3
Aprende a utilizar la Intersection Observer API con la Composition API de Vue 3 para agregarle reactividad y permitir hacer lazy-load de colecciones y elementos
Juan Andrés Núñez3 razones para usar script setup y Vuejs 3
Conoce las novedades de script setup en Vue 3, entiende por qué puede hacerte la vida más fácil evitando tareas repetitivas y comienza a utilizarlo en tus próximos proyectos
Juan Andrés NúñezCómo llamar un método de un componente hijo
Algo que, si bien no tendrás que hacer todos los días, puede salvarte la vida en algún caso
Juan Andrés NúñezAuto cargar componentes con Vite
Auto cargar componentes globales en Vue 3 nunca ha sido más sencillo, gracias a una de las características de Vite llamada Glob Import
Juan Andrés NúñezAcceder a template refs con Vue 3 Composition API
Aprender a crear referencias para manipular elementos del DOM usando Vue 3 y la Composition API🔥
Juan Andrés NúñezWatch vs WatchEffect
Vue 3 y su diferencia entre watch y watchEffect. Sí, ambos sirven para observar valores reactivos y reaccionar a sus cambios, pero hay varios detalles que debes conocer.
Juan Andrés NúñezRef vs Reactive
Aprende la diferencia entre Ref y Reactive en Vue 3 a través de ejemplos donde conocerás los pros y contras en cada caso
Juan Andrés Núñez