[{"data":1,"prerenderedAt":2284},["ShallowReactive",2],{"app-menu-posts":3,"series-page-all-posts":1052},[4,59,93,130,172,211,246,282,314,344,372,399,428,455,481,506,531,566,595,623,649,677,705,730,757,784,815,840,868,897,934,965,988,1008,1029],{"id":5,"title":6,"cover":7,"coverAlt":8,"date":9,"description":10,"draft":11,"extension":12,"lab":13,"locale":14,"meta":15,"navigation":26,"path":27,"schemaOrg":28,"seo":33,"series":34,"seriesDescription":35,"seriesOrder":36,"seriesTitle":37,"slug":13,"stem":38,"tags":39,"__hash__":58},"blog\u002Fblog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.es.md","ref() vs reactive(): cómo modelar el estado en Vue 3","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1785199207\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3_j8hzro.png","Comparación entre ref() y reactive() para modelar estado reactivo en Vue 3","2026-07-27","Aprende a elegir entre ref(), reactive(), toRefs() y useState() según el tipo de dato, la desestructuración y el alcance SSR.",false,"md",null,"es",{"updatedAt":16,"author":17,"coverCaption":18,"keywords":19},"2026-07-27T18:31:41-05:00","TODOvue","Referencia oficial de Vue sobre los fundamentos de la reactividad",[20,21,22,23,24,25],"ref() vs reactive()","reactividad en Vue 3","estado en Vue 3","toRefs()","useState() en Nuxt","Composition API",true,"\u002Fblog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.es",[29],{"headline":6,"author":30,"datePublished":16,"@type":32},{"name":17,"@type":31},"Person","BlogPosting",{"title":6,"description":10},"vue-reactivity","Ruta práctica para entender cómo Vue rastrea el estado, elegir la API reactiva correcta y optimizar actualizaciones sin perder claridad.",2,"Reactividad práctica en Vue 3","blog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.es",[40,43,46,49,52,55],{"tag":41,"color":42},"Reactividad","#1D5BA1",{"tag":44,"color":45},"Gestión de Estado","#FF9800",{"tag":47,"color":48},"Guías","#42B983",{"tag":50,"color":51},"Composables","#14B8A6",{"tag":53,"color":54},"SSR","#0E9AA7",{"tag":56,"color":57},"Buenas Prácticas","#2196F3","4ri62At3pbdif7nXeHjvnk4eA0dEP-DbZgMfGU_ZNFM",{"id":60,"title":61,"cover":62,"coverAlt":63,"date":64,"description":65,"draft":11,"extension":12,"lab":13,"locale":14,"meta":66,"navigation":26,"path":74,"schemaOrg":75,"seo":79,"series":80,"seriesDescription":81,"seriesOrder":82,"seriesTitle":83,"slug":13,"stem":84,"tags":85,"__hash__":92},"blog\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es.md","Pinia en Vue 3: cuándo usar estado global y cuándo no","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1784941922\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to_aztyma.png","Diagrama de decisión para elegir entre estado local, props y eventos, composables o Pinia en Vue 3.","2026-07-25","Aprende a decidir si un dato debe vivir en un componente, un subárbol o una store de Pinia según sus consumidores, duración y lógica compartida.",{"updatedAt":67,"author":17,"coverCaption":68,"keywords":69},"2026-07-26T00:00:00-05:00","Referencia visual para decidir el alcance del estado en Vue 3.",[70,71,72,44,73,50],"State","Pinia","Vue 3","Arquitectura","\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es",[76],{"headline":61,"author":77,"datePublished":78,"@type":32},{"name":17,"@type":31},"2026-07-24T23:20:00-05:00",{"title":61,"description":65},"vue-3-architecture","Serie práctica para diseñar aplicaciones Vue 3 mantenibles mediante comunicación clara entre componentes, lógica reutilizable, dependencias acotadas y una gestión intencional del estado.",6,"Arquitectura de aplicaciones en Vue 3","blog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es",[86,87,89,90,91],{"tag":44,"color":45},{"tag":73,"color":88},"#4CAF50",{"tag":56,"color":57},{"tag":50,"color":51},{"tag":53,"color":54},"HOD-MgWjq0ELvp4Sgos3olc_qJbRXYe26_GuDpSXnio",{"id":94,"title":95,"cover":96,"coverAlt":97,"date":98,"description":99,"draft":11,"extension":12,"lab":13,"locale":14,"meta":100,"navigation":26,"path":109,"schemaOrg":110,"seo":114,"series":80,"seriesDescription":81,"seriesOrder":115,"seriesTitle":83,"slug":13,"stem":116,"tags":117,"__hash__":129},"blog\u002Fblog\u002Fvue-3-component-architecture.es.md","Arquitectura de componentes en Vue 3: comunicación, reutilización y dependencias","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1783729357\u002Fvue-3-component-architecture_ecetna.png","Guía de Vue.js sobre arquitectura y componentes reutilizables","2026-07-10","Aprende a elegir entre props, eventos, slots, atributos heredados, composables y provide\u002Finject para diseñar componentes Vue 3 claros y mantenibles.",{"updatedAt":67,"author":17,"coverCaption":101,"keywords":102},"Referencia oficial de Vue.js sobre componentes",[103,104,105,106,107,108],"Componentes","arquitectura de componentes en Vue 3","props y eventos","slots en Vue 3","composables","provide\u002Finject","\u002Fblog\u002Fvue-3-component-architecture.es",[111],{"headline":95,"author":112,"datePublished":113,"@type":32},{"name":17,"@type":31},"2026-07-10T17:19:30-05:00",{"title":95,"description":99},1,"blog\u002Fvue-3-component-architecture.es",[118,120,121,122,123,126],{"tag":103,"color":119},"#41B883",{"tag":73,"color":88},{"tag":56,"color":57},{"tag":50,"color":51},{"tag":124,"color":125},"Eventos","#2D98DA",{"tag":127,"color":128},"Slots","#8E44AD","BaFZob8eRi9VR8OCyHwWlNIYLAdT7a-5PZC1sFT00E8",{"id":131,"title":132,"cover":133,"coverAlt":134,"date":135,"description":136,"draft":11,"extension":12,"lab":137,"locale":14,"meta":147,"navigation":26,"path":156,"schemaOrg":157,"seo":161,"series":34,"seriesDescription":35,"seriesOrder":162,"seriesTitle":37,"slug":13,"stem":163,"tags":164,"__hash__":171},"blog\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.es.md","Vue computed vs watch vs watchEffect: cuándo usar cada uno","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1783385054\u002Fvue-computed-watch-watcheffect-guide_vepplp.png","Conceptos de reactividad en Vue representados como flujos de datos conectados","2026-07-07","Aprende la diferencia práctica entre computed, watch y watchEffect en Vue 3, con ejemplos, errores comunes y una guía de decisión para componentes reales.",{"title":138,"goal":139,"tasks":140,"starterCode":145,"solutionHint":146},"Elige la herramienta reactiva correcta","Practica el uso de computed para estado derivado, watch para efectos secundarios explícitos y watchEffect para rastreo automático de dependencias.",[141,142,143,144],"Crea un input de búsqueda guardado en un ref.","Usa computed para normalizar la búsqueda.","Usa watch para disparar una función tipo fetch solo cuando cambie la búsqueda normalizada.","Usa watchEffect para registrar cada valor reactivo leído dentro del efecto y explica por qué se ejecuta.","\u003Cscript setup>\nimport { computed, ref, watch, watchEffect } from 'vue'\n\nconst query = ref('')\nconst page = ref(1)\n\nconst normalizedQuery = computed(() => query.value.trim().toLowerCase())\n\nwatch(normalizedQuery, (value) => {\n  page.value = 1\n  console.log('Buscar resultados para:', value)\n})\n\nwatchEffect(() => {\n  console.log('Estado actual de búsqueda:', normalizedQuery.value, page.value)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" placeholder=\"Buscar artículos\">\n  \u003Cp>Búsqueda normalizada: {{ normalizedQuery }}\u003C\u002Fp>\n  \u003Cp>Página: {{ page }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","El computed deriva datos sin causar efectos secundarios. El watch reacciona a una fuente explícita. El watchEffect se vuelve a ejecutar cuando cambia cualquier valor que lee.",{"updatedAt":148,"coverCaption":149,"author":17,"keywords":150},"2026-07-27T00:00:00-05:00","Computed, watchers y efectos en Vue 3 por TODOvue",[151,72,152,153,154,155,25],"Vue.js","computed","watch","watchEffect","reactividad","\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.es",[158],{"headline":132,"author":159,"datePublished":160,"@type":32},{"name":17,"@type":31},"2026-07-06T20:00:00-05:00",{"title":132,"description":136},3,"blog\u002Fvue-computed-watch-watcheffect-guide.es",[165,166,167,170],{"tag":41,"color":42},{"tag":56,"color":57},{"tag":168,"color":169},"Rendimiento","#D4A017",{"tag":47,"color":48},"a8l5u3F8H-uZBX5TmLAKFBuRfvIoE5kOjfOeaSHyk-A",{"id":173,"title":174,"cover":175,"coverAlt":174,"date":176,"description":177,"draft":11,"extension":12,"lab":178,"locale":14,"meta":188,"navigation":26,"path":196,"schemaOrg":197,"seo":201,"series":80,"seriesDescription":81,"seriesOrder":36,"seriesTitle":83,"slug":13,"stem":202,"tags":203,"__hash__":210},"blog\u002Fblog\u002Fvue-3-props-emits-component-communication.es.md","Props y Emits en Vue 3: comunicación entre componentes","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1782863303\u002Fvue-3-props-emits-component-communication_chbuab.png","2026-07-01","Aprende cómo usar props y emits en Vue 3 para pasar datos hacia componentes hijos y comunicar eventos hacia componentes padres de forma clara.",{"title":179,"goal":180,"tasks":181,"starterCode":186,"solutionHint":187},"Crea una tarjeta de tarea con props y emits","Construye un componente pequeño que recibe una tarea por props y avisa al padre cuando el usuario quiere marcarla como completada.",[182,183,184,185],"Crea un componente TaskCard.vue.","Recibe una prop task con title y completed.","Muestra el estado de la tarea en el template.","Emite un evento complete cuando el usuario haga clic en el botón.","\u003C!-- TaskCard.vue -->\n\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst emit = defineEmits(['complete'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ props.task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ props.task.completed ? 'Completada' : 'Pendiente' }}\u003C\u002Fp>\n\n    \u003Cbutton @click=\"emit('complete', props.task.id)\">\n      Marcar como completada\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","El componente hijo no necesita cambiar la lista directamente. Solo comunica la intención; el padre decide cómo actualizar el estado.",{"updatedAt":67,"coverCaption":189,"author":17,"keywords":190},"Comunicación entre componentes en Vue 3 por TODOvue",[151,72,191,192,193,194,195],"props","emits","componentes","defineProps","defineEmits","\u002Fblog\u002Fvue-3-props-emits-component-communication.es",[198],{"headline":174,"author":199,"datePublished":200,"@type":32},{"name":17,"@type":31},"2026-06-30T20:00:00-05:00",{"title":174,"description":177},"blog\u002Fvue-3-props-emits-component-communication.es",[204,205,206,207],{"tag":103,"color":119},{"tag":124,"color":125},{"tag":47,"color":48},{"tag":208,"color":209},"Básico","#B173BF","dLcA6qwTAutjayKo9BSZ8VD27UMroxba5SkIczwtVII",{"id":212,"title":213,"cover":214,"coverAlt":215,"date":216,"description":217,"draft":11,"extension":12,"lab":218,"locale":14,"meta":228,"navigation":26,"path":233,"schemaOrg":234,"seo":238,"series":80,"seriesDescription":81,"seriesOrder":162,"seriesTitle":83,"slug":13,"stem":239,"tags":240,"__hash__":245},"blog\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.es.md","Composables en Vue 3: cómo extraer lógica reutilizable sin complicarte","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1782172219\u002Fvue-3-composables-extract-reusable-logic.es.md_myyutl.png","Pantalla con código en un entorno de desarrollo","2026-06-23","Aprende qué son los composables en Vue 3, cuándo conviene usarlos y cómo extraer lógica reutilizable con un ejemplo claro usando useToggle.",{"title":219,"goal":220,"tasks":221,"starterCode":226,"solutionHint":227},"Crea tu primer composable: useToggle","Extrae una lógica pequeña y repetible para abrir, cerrar y alternar un estado booleano desde cualquier componente.",[222,223,224,225],"Crea un archivo useToggle.js o useToggle.ts.","Usa ref() para guardar el estado activo o inactivo.","Expón las funciones open(), close() y toggle().","Usa el composable desde un componente con un botón.","\u003Cscript setup>\nimport { ref } from 'vue'\n\nfunction useToggle(initialValue = false) {\n  const isActive = ref(initialValue)\n\n  const open = () => {\n    isActive.value = true\n  }\n\n  const close = () => {\n    isActive.value = false\n  }\n\n  const toggle = () => {\n    isActive.value = !isActive.value\n  }\n\n  return {\n    isActive,\n    open,\n    close,\n    toggle\n  }\n}\n\nconst menu = useToggle()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"menu.toggle()\">\n    {{ menu.isActive ? 'Cerrar menu' : 'Abrir menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"menu.isActive\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n","Si el componente ya no necesita saber cómo cambia el estado, solo cuándo usarlo, el composable está haciendo bien su trabajo.",{"updatedAt":67,"coverCaption":229,"author":17,"keywords":230},"Código reutilizable en Vue 3 por TODOvue",[151,72,50,25,231,232],"useToggle","lógica reutilizable","\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.es",[235],{"headline":213,"author":236,"datePublished":237,"@type":32},{"name":17,"@type":31},"2026-06-22T20:00:00-05:00",{"title":213,"description":217},"blog\u002Fvue-3-composables-extract-reusable-logic.es",[241,242,243,244],{"tag":50,"color":51},{"tag":103,"color":119},{"tag":56,"color":57},{"tag":208,"color":209},"fUGaAtyXtTvA6HVDF8xZfMxwmMsfGc4zmxB1UCsyhQs",{"id":247,"title":248,"cover":249,"coverAlt":250,"date":251,"description":252,"draft":11,"extension":12,"lab":13,"locale":14,"meta":253,"navigation":26,"path":261,"schemaOrg":262,"seo":265,"series":266,"seriesDescription":267,"seriesOrder":268,"seriesTitle":269,"slug":13,"stem":270,"tags":271,"__hash__":281},"blog\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.es.md","Ciclos de vida en Vue: renderizado del lado del servidor (serverPrefetch)","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1774051488\u002Fvue-lifecycle-ssr-serverprefetch_averlr.png","Ilustración de un servidor entregando HTML con datos ya resueltos, mientras un cliente hidrata sin necesidad de fetch adicional.","2026-03-21","Cómo usar serverPrefetch y onServerPrefetch para cargar datos antes del render SSR, evitar HTML incompleto y coordinar el primer render del servidor con la hidratación del cliente.",{"updatedAt":254,"readingTime":255,"coverCaption":256,"author":17,"keywords":257},"2026-03-20T20:00:00-05:00",8,"Con `serverPrefetch`, el servidor puede entregar HTML ya completo, mejorando la experiencia y el SEO desde el primer render.",[151,258,259,53,260],"serverPrefetch","onServerPrefetch","hidratación","\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.es",[263],{"headline":248,"author":264,"datePublished":254,"@type":32},{"name":17,"@type":31},{"title":248,"description":252},"vue-lifecycle-hooks","Serie práctica para dominar cada hook del ciclo de vida de Vue, desde los básicos hasta los avanzados.",9,"Ciclos de vida en Vue","blog\u002Fvue-lifecycle-ssr-serverprefetch.es",[272,275,276,277,278],{"tag":273,"color":274},"Ciclo de Vida","#FF6B6B",{"tag":53,"color":54},{"tag":73,"color":88},{"tag":103,"color":119},{"tag":279,"color":280},"Avanzado","#F54927","gpVQi88PJ9GPzNJNjmGEweIYhWKcd-KIwq-VxiZMkTQ",{"id":283,"title":284,"cover":285,"coverAlt":286,"date":287,"description":288,"draft":11,"extension":12,"lab":13,"locale":14,"meta":289,"navigation":26,"path":297,"schemaOrg":298,"seo":301,"series":266,"seriesDescription":267,"seriesOrder":255,"seriesTitle":269,"slug":13,"stem":302,"tags":303,"__hash__":313},"blog\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es.md","Ciclos de vida en Vue: depuración del render (renderTracked, renderTriggered)","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773802976\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered_ekkgg1.png","Ilustración de depuración del render en Vue con renderTracked y renderTriggered","2026-03-18","Cómo usar renderTracked, renderTriggered, onRenderTracked y onRenderTriggered para entender qué dependencias entran en un render y qué cambios están forzando nuevas actualizaciones.",{"updatedAt":290,"coverCaption":291,"author":17,"keywords":292},"2026-03-17T22:00:00-05:00","renderTracked y renderTriggered ayudan a ver qué dependencia entra al render y cuál lo vuelve a disparar.",[151,293,294,295,296],"renderTracked","renderTriggered","onRenderTracked","onRenderTriggered","\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es",[299],{"headline":284,"author":300,"datePublished":290,"@type":32},{"name":17,"@type":31},{"title":284,"description":288},"blog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es",[304,305,308,311,312],{"tag":273,"color":274},{"tag":306,"color":307},"Depuración","#C44569",{"tag":309,"color":310},"Renderizado","#E17055",{"tag":41,"color":42},{"tag":279,"color":280},"5mr-vMalD_jw1VlwSiz5cmZRVM9obP8ZlRFNu2rgR88",{"id":315,"title":316,"cover":317,"coverAlt":318,"date":319,"description":320,"draft":11,"extension":12,"lab":13,"locale":14,"meta":321,"navigation":26,"path":329,"schemaOrg":330,"seo":333,"series":266,"seriesDescription":267,"seriesOrder":334,"seriesTitle":269,"slug":13,"stem":335,"tags":336,"__hash__":343},"blog\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.es.md","Ciclos de vida en Vue: manejo de errores con errorCaptured","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773714502\u002Fvue-lifecycle-error-handling-errorcaptured_mn62y7.png","Ilustración de un componente de Vue con un escudo de protección, simbolizando el manejo de errores con errorCaptured.","2026-03-17","Cómo usar errorCaptured y onErrorCaptured para aislar fallos en componentes hijos, mostrar estados de respaldo y registrar errores sin romper toda la interfaz.",{"updatedAt":322,"coverCaption":323,"author":17,"keywords":324},"2026-03-16T22:00:00-05:00","Con errorCaptured, puedes proteger partes específicas de tu UI sin comprometer toda la experiencia.",[151,325,326,327,328],"errorCaptured","onErrorCaptured","manejo de errores","error boundaries","\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.es",[331],{"headline":316,"author":332,"datePublished":322,"@type":32},{"name":17,"@type":31},{"title":316,"description":320},7,"blog\u002Fvue-lifecycle-error-handling-errorcaptured.es",[337,338,341,342],{"tag":273,"color":274},{"tag":339,"color":340},"Manejo de Errores","#E55039",{"tag":103,"color":119},{"tag":279,"color":280},"epm2rTVpqLV5pyIW1xBngTSC9yZ0Hdu43YNcWNkm4xw",{"id":345,"title":346,"cover":347,"coverAlt":348,"date":349,"description":350,"draft":11,"extension":12,"lab":13,"locale":14,"meta":351,"navigation":26,"path":359,"schemaOrg":360,"seo":363,"series":266,"seriesDescription":267,"seriesOrder":82,"seriesTitle":269,"slug":13,"stem":364,"tags":365,"__hash__":371},"blog\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.es.md","Ciclos de vida en Vue: componentes cacheados con \u003CKeepAlive> (activated, deactivated)","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773371011\u002Fvue-lifecycle-keepalive-activated-deactivated_abjmwe.png","Ilustración de componentes cacheados con KeepAlive en Vue usando activated y deactivated","2026-03-13","Cómo funcionan activated y deactivated en componentes cacheados con \u003CKeepAlive>, cuándo usarlos y cómo evitar datos obsoletos, timers activos y lógica mal ubicada.",{"updatedAt":352,"coverCaption":353,"author":17,"keywords":354},"2026-03-12T23:00:00-05:00","KeepAlive permite desactivar y reactivar componentes sin destruir su estado local",[151,355,356,357,358],"KeepAlive","activated","deactivated","cache de componentes","\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.es",[361],{"headline":346,"author":362,"datePublished":352,"@type":32},{"name":17,"@type":31},{"title":346,"description":350},"blog\u002Fvue-lifecycle-keepalive-activated-deactivated.es",[366,367,369,370],{"tag":273,"color":274},{"tag":355,"color":368},"#27AE60",{"tag":103,"color":119},{"tag":279,"color":280},"LTJL6v4mw6lt5Nb8vhKocgwmO5u1q1TkDLjAgpE1abw",{"id":373,"title":374,"cover":375,"coverAlt":376,"date":377,"description":378,"draft":11,"extension":12,"lab":13,"locale":14,"meta":379,"navigation":26,"path":387,"schemaOrg":388,"seo":391,"series":266,"seriesDescription":267,"seriesOrder":392,"seriesTitle":269,"slug":13,"stem":393,"tags":394,"__hash__":398},"blog\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es.md","Ciclos de vida en Vue: fase de desmontaje (beforeUnmount, unmounted)","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773284773\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted_f9gqy0.png","Ilustración de la fase de desmontaje del ciclo de vida de Vue con beforeUnmount y unmounted","2026-03-12","Qué ocurre cuando un componente sale de pantalla y cómo usar beforeUnmount y unmounted para limpiar listeners, timers y efectos sin dejar fugas ni comportamientos extraños.",{"updatedAt":380,"coverCaption":381,"author":17,"keywords":382},"2026-03-11T22:00:00-05:00","La fase de desmontaje ocurre cuando Vue retira un componente del árbol activo",[151,383,384,385,386],"beforeUnmount","unmounted","onBeforeUnmount","cleanup","\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es",[389],{"headline":374,"author":390,"datePublished":380,"@type":32},{"name":17,"@type":31},{"title":374,"description":378},5,"blog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es",[395,396,397],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":208,"color":209},"smji8WZsDewTRrh-7nuJ-1afgxZeubOV6QESqNZQknk",{"id":400,"title":401,"cover":402,"coverAlt":403,"date":404,"description":405,"draft":11,"extension":12,"lab":13,"locale":14,"meta":406,"navigation":26,"path":414,"schemaOrg":415,"seo":418,"series":266,"seriesDescription":267,"seriesOrder":419,"seriesTitle":269,"slug":13,"stem":420,"tags":421,"__hash__":427},"blog\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es.md","Ciclos de vida en Vue: fase de actualización (beforeUpdate, updated)","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773284616\u002Fvue-lifecycle-update-phase-beforeupdate-updated_qql7os.png","Ilustración de la fase de actualización del ciclo de vida de Vue con beforeUpdate y updated","2026-03-11","Qué ocurre cuando Vue vuelve a renderizar un componente y cómo usar beforeUpdate y updated sin convertirlos en sustitutos de watch o computed.",{"updatedAt":407,"coverCaption":408,"author":17,"keywords":409},"2026-03-10T22:00:00-05:00","La fase de actualización ocurre cuando un cambio reactivo obliga a Vue a volver a renderizar el componente.",[151,410,411,412,413],"beforeUpdate","updated","onUpdated","renderizado","\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es",[416],{"headline":401,"author":417,"datePublished":407,"@type":32},{"name":17,"@type":31},{"title":401,"description":405},4,"blog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es",[422,423,424,425,426],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":208,"color":209},"98z2JKjTHZwuUniJlvBcSw0oAKPwayH9G9A608P_wSQ",{"id":429,"title":430,"cover":431,"coverAlt":432,"date":433,"description":434,"draft":11,"extension":12,"lab":13,"locale":14,"meta":435,"navigation":26,"path":443,"schemaOrg":444,"seo":447,"series":266,"seriesDescription":267,"seriesOrder":162,"seriesTitle":269,"slug":13,"stem":448,"tags":449,"__hash__":454},"blog\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es.md","Ciclos de vida en Vue: fase de montaje (beforeMount, mounted)","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773284431\u002Fvue-lifecycle-mounting-phase-beforemount-mounted_wkrzal.png","Ilustración del ciclo de vida de un componente Vue enfocada en la fase de montaje del DOM","2026-03-10","Qué ocurre justo antes y justo después de que Vue inserte un componente en el DOM, y cómo usar beforeMount y mounted sin meter lógica donde no corresponde.",{"updatedAt":436,"coverCaption":437,"author":17,"keywords":438},"2026-03-09T22:00:00-05:00","La fase de montaje es el momento en el que Vue crea e inserta el DOM del componente en la página.",[151,439,440,441,442],"beforeMount","mounted","onMounted","DOM","\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es",[445],{"headline":430,"author":446,"datePublished":436,"@type":32},{"name":17,"@type":31},{"title":430,"description":434},"blog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es",[450,451,452,453],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":309,"color":310},{"tag":208,"color":209},"GQ-lIt1QfPL-Vw50b8qQ3uquMQjxzjBexBGH1U_jPMM",{"id":456,"title":457,"cover":458,"coverAlt":459,"date":460,"description":461,"draft":11,"extension":12,"lab":13,"locale":14,"meta":462,"navigation":26,"path":469,"schemaOrg":470,"seo":473,"series":266,"seriesDescription":267,"seriesOrder":36,"seriesTitle":269,"slug":13,"stem":474,"tags":475,"__hash__":480},"blog\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es.md","Ciclos de vida en Vue: fase de creación (beforeCreate, created, setup)","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773284254\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup_fkkyiw.png","Ilustración de un ciclo de vida de un componente Vue, destacando la fase de creación con beforeCreate, created y setup","2026-03-07","Qué pasa realmente en la fase de creación de un componente Vue y cómo decidir entre beforeCreate, created y setup.",{"updatedAt":463,"coverCaption":464,"author":17,"keywords":465},"2026-03-06T20:00:00-05:00","En esta imagen se muestra el ciclo de vida de un componente Vue, con énfasis en la fase de creación donde se ejecutan los hooks beforeCreate, created y setup.",[151,466,467,468,25],"beforeCreate","created","setup","\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es",[471],{"headline":457,"author":472,"datePublished":463,"@type":32},{"name":17,"@type":31},{"title":457,"description":461},"blog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es",[476,477,478,479],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":208,"color":209},"gD0R9mljoBWBraFYutY3GdOI6IFtdYK-ul1RE0pCfVo",{"id":482,"title":483,"cover":484,"coverAlt":483,"date":485,"description":486,"draft":11,"extension":12,"lab":13,"locale":14,"meta":487,"navigation":26,"path":494,"schemaOrg":495,"seo":498,"series":266,"seriesDescription":267,"seriesOrder":115,"seriesTitle":269,"slug":13,"stem":499,"tags":500,"__hash__":505},"blog\u002Fblog\u002Fvue-lifecycle-hooks-overview.es.md","Ciclos de vida en Vue: Una visión general","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1772676391\u002Fvue-lifecycle-hooks-overview_ovnxzy.png","2026-03-05","Un mapa claro de todos los ciclos de vida de Vue 3 para entender cuándo usar cada hook.",{"updatedAt":488,"readingTime":255,"coverCaption":489,"author":17,"keywords":490},"2026-03-04T21:30:00-05:00","Panorama de los hooks del ciclo de vida en Vue 3.",[151,491,25,492,493],"Ciclos de vida","Options API","Hooks","\u002Fblog\u002Fvue-lifecycle-hooks-overview.es",[496],{"headline":483,"author":497,"datePublished":488,"@type":32},{"name":17,"@type":31},{"title":483,"description":486},"blog\u002Fvue-lifecycle-hooks-overview.es",[501,502,503,504],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":208,"color":209},"SBKJnT6tEFXx0FslfjbqCoy_-zKjHKGzNv961L2uqmc",{"id":507,"title":508,"cover":509,"coverAlt":508,"date":510,"description":511,"draft":11,"extension":12,"lab":13,"locale":14,"meta":512,"navigation":26,"path":518,"schemaOrg":519,"seo":523,"series":34,"seriesDescription":35,"seriesOrder":392,"seriesTitle":37,"slug":13,"stem":524,"tags":525,"__hash__":530},"blog\u002Fblog\u002Fvue-3-reactivity-internals.es.md","Cómo funciona internamente el sistema de reactividad en Vue 3","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1772497884\u002Fvue-3-reactivity-internals_hhru1s.png","2026-03-03","Disección técnica del motor reactivo de Vue 3: dependency tracking, estructura WeakMap->Map->Set, activeEffect, scheduler, batching y errores reales de arquitectura.",{"updatedAt":148,"coverCaption":513,"author":17,"keywords":514},"Portada temporal: reemplazar por arte final de TODOvue",[72,155,515,516,517,152],"dependency tracking","scheduler","batching","\u002Fblog\u002Fvue-3-reactivity-internals.es",[520],{"headline":508,"author":521,"datePublished":522,"@type":32},{"name":17,"@type":31},"2026-03-02T20:00:00-05:00",{"title":508,"description":511},"blog\u002Fvue-3-reactivity-internals.es",[526,527,528,529],{"tag":41,"color":42},{"tag":73,"color":88},{"tag":168,"color":169},{"tag":279,"color":280},"hSP4l_wcWdf1tErUej5yTDbc2Tt0ZF4eiL1QPmqxGm4",{"id":532,"title":533,"cover":534,"coverAlt":535,"date":536,"description":537,"draft":11,"extension":12,"lab":13,"locale":14,"meta":538,"navigation":26,"path":544,"schemaOrg":545,"seo":549,"series":550,"seriesDescription":551,"seriesOrder":552,"seriesTitle":553,"slug":13,"stem":554,"tags":555,"__hash__":565},"blog\u002Fblog\u002Fdirectives-vue-custom-directives-guide.es.md","Directivas en Vue: Directivas personalizadas","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1772207944\u002Fdirectives-vue-custom-directives-guide_nwp7od.png","Ejemplo de directiva personalizada en Vue 3","2026-02-27","Aprende a crear directivas personalizadas en Vue 3 con casos reales, ciclo de vida, limpieza correcta y ejemplos equivalentes en Composition API y Options API.",{"updatedAt":539,"coverCaption":535,"author":17,"keywords":540},"2026-02-27T12:30:00-05:00",[151,541,542,543,25,492],"directivas personalizadas","custom directives","ciclo de vida","\u002Fblog\u002Fdirectives-vue-custom-directives-guide.es",[546],{"headline":547,"author":548,"datePublished":539,"@type":32},"Directivas personalizadas en Vue 3",{"name":17,"@type":31},{"title":533,"description":537},"vue-directives","Ruta paso a paso para dominar las directivas principales de Vue.",11,"Directivas en Vue","blog\u002Fdirectives-vue-custom-directives-guide.es",[556,559,562,563,564],{"tag":557,"color":558},"Directivas","#6C5CE7",{"tag":560,"color":561},"Directivas Personalizadas","#7D5FFF",{"tag":73,"color":88},{"tag":41,"color":42},{"tag":279,"color":280},"wVpr_e--WXOvyGkAScAp5eWTfVDbzY9Te6sVUdj96GA",{"id":567,"title":568,"cover":569,"coverAlt":570,"date":571,"description":572,"draft":11,"extension":12,"lab":13,"locale":14,"meta":573,"navigation":26,"path":579,"schemaOrg":580,"seo":584,"series":550,"seriesDescription":551,"seriesOrder":585,"seriesTitle":553,"slug":13,"stem":586,"tags":587,"__hash__":594},"blog\u002Fblog\u002Fdirectives-vue-v-cloak-guide.es.md","Directivas en Vue: v-cloak","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771976009\u002Fdirectives-vue-v-cloak-guide_vhkz2i.png","Portada temporal para el artículo sobre v-cloak en Vue","2026-02-25","Aprende a usar v-cloak en Vue 3 para evitar el parpadeo de plantillas sin compilar, con Composition API y Options API, casos reales, errores comunes y buenas prácticas.",{"updatedAt":574,"coverCaption":513,"author":17,"keywords":575},"2026-02-25T12:30:00-05:00",[151,576,577,578,25,492],"v-cloak","FOUC","hydration","\u002Fblog\u002Fdirectives-vue-v-cloak-guide.es",[581],{"headline":582,"author":583,"datePublished":574,"@type":32},"Directiva v-cloak en Vue: evita parpadeos antes del montaje",{"name":17,"@type":31},{"title":568,"description":572},10,"blog\u002Fdirectives-vue-v-cloak-guide.es",[588,589,592,593],{"tag":557,"color":558},{"tag":590,"color":591},"Templates","#00B894",{"tag":309,"color":310},{"tag":208,"color":209},"JfS7unY1XQ1HsdW8oWBHbTqDpzHjl2-9BrnPQZr3SRE",{"id":596,"title":597,"cover":598,"coverAlt":599,"date":600,"description":601,"draft":11,"extension":12,"lab":13,"locale":14,"meta":602,"navigation":26,"path":609,"schemaOrg":610,"seo":614,"series":550,"seriesDescription":551,"seriesOrder":268,"seriesTitle":553,"slug":13,"stem":615,"tags":616,"__hash__":622},"blog\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es.md","Directivas en Vue: v-once \u002F v-memo \u002F v-pre","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771897190\u002Fdirectives-vue-v-once-v-memo-v-pre-guide_ljsdlv.png","Imagen temporal para portada del artículo sobre v-once, v-memo y v-pre en Vue","2026-02-24","Aprende cuándo usar v-once, v-memo y v-pre en Vue 3 para optimizar renderizado, evitar trabajo innecesario y mantener componentes claros.",{"updatedAt":603,"coverCaption":513,"author":17,"keywords":604},"2026-02-23T21:00:00-05:00",[151,605,606,607,608],"v-once","v-memo","v-pre","optimización render","\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es",[611],{"headline":612,"author":613,"datePublished":603,"@type":32},"Directivas en Vue: v-once, v-memo y v-pre para renderizado eficiente",{"name":17,"@type":31},{"title":597,"description":601},"blog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es",[617,618,619,620,621],{"tag":557,"color":558},{"tag":168,"color":169},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":279,"color":280},"ltUtJZ-ViSqRogEpVIS3x2XdEz345biUTyEg7SJpXLo",{"id":624,"title":625,"cover":626,"coverAlt":627,"date":628,"description":629,"draft":11,"extension":12,"lab":13,"locale":13,"meta":630,"navigation":26,"path":637,"schemaOrg":638,"seo":641,"series":550,"seriesDescription":551,"seriesOrder":255,"seriesTitle":553,"slug":13,"stem":642,"tags":643,"__hash__":648},"blog\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.es.md","Directivas en Vue: v-text y v-html","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771635700\u002Fdirectives-vue-v-text-v-html-guide_n0cemz.png","Ejemplo de uso de v-text y v-html en Vue.js","2026-02-21","Aprende cuándo usar v-text y v-html en Vue, diferencias clave, riesgos de seguridad, errores comunes y patrones recomendados con ejemplos en Composition API y Options API.",{"updatedAt":631,"coverCaption":632,"keywords":633},"2026-02-20T20:00:00-05:00","Aprende a usar v-text y v-html de forma segura y efectiva en tus proyectos Vue",[151,634,635,636,413,25,492],"v-text","v-html","XSS","\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.es",[639],{"headline":625,"author":640,"datePublished":631,"@type":32},{"name":17,"@type":31},{"title":625,"description":629},"blog\u002Fdirectives-vue-v-text-v-html-guide.es",[644,645,646,647],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":309,"color":310},{"tag":208,"color":209},"nRl4DrJhzsMVrCXStftR_-Go1SJK8NAAhi0uuGqgmkI",{"id":650,"title":651,"cover":652,"coverAlt":653,"date":654,"description":655,"draft":11,"extension":12,"lab":13,"locale":14,"meta":656,"navigation":26,"path":664,"schemaOrg":665,"seo":669,"series":550,"seriesDescription":551,"seriesOrder":334,"seriesTitle":553,"slug":13,"stem":670,"tags":671,"__hash__":676},"blog\u002Fblog\u002Fdirectives-vue-v-slot-guide.es.md","Directivas en Vue: v-slot","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771508914\u002Fdirectives-vue-v-slot-guide_wr2iyy.png","Portada del artículo Directivas en Vue: v-slot","2026-02-19","Aprende a dominar v-slot en Vue 3: slots por defecto, nombrados y con props (scoped slots), con ejemplos claros en Composition API y Options API.",{"updatedAt":657,"coverCaption":658,"author":17,"keywords":659},"2026-02-19T08:00:00-05:00","Usa v-slot para construir componentes más flexibles y reutilizables.",[151,660,661,662,663,25,492],"v-slot","slots","scoped slots","componentes reutilizables","\u002Fblog\u002Fdirectives-vue-v-slot-guide.es",[666],{"headline":667,"author":668,"datePublished":657,"@type":32},"Directivas en Vue: v-slot con ejemplos claros y prácticos",{"name":17,"@type":31},{"title":651,"description":655},"blog\u002Fdirectives-vue-v-slot-guide.es",[672,673,674,675],{"tag":557,"color":558},{"tag":127,"color":128},{"tag":103,"color":119},{"tag":279,"color":280},"DxshI1c7MLWMpiJg_QZh4QLABHouxeRnejywUpaJAOU",{"id":678,"title":679,"cover":680,"coverAlt":681,"date":682,"description":683,"draft":11,"extension":12,"lab":13,"locale":14,"meta":684,"navigation":26,"path":690,"schemaOrg":691,"seo":695,"series":550,"seriesDescription":551,"seriesOrder":82,"seriesTitle":553,"slug":13,"stem":696,"tags":697,"__hash__":704},"blog\u002Fblog\u002Fdirectives-vue-v-model-guide.es.md","Directivas en Vue: v-model","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771265788\u002Fdirectives-vue-v-model-guide_ticgya.png","Imagen temporal para portada del artículo sobre v-model en Vue","2026-02-16","Aprende a usar v-model en Vue 3 para formularios y componentes personalizados, con Composition API y Options API, casos reales, errores comunes y buenas practicas.",{"updatedAt":685,"coverCaption":513,"author":17,"keywords":686},"2026-02-16T13:30:00-05:00",[151,687,688,689,25,492],"v-model","formularios","two-way binding","\u002Fblog\u002Fdirectives-vue-v-model-guide.es",[692],{"headline":693,"author":694,"datePublished":685,"@type":32},"Directiva v-model en Vue: guía completa para formularios y componentes",{"name":17,"@type":31},{"title":679,"description":683},"blog\u002Fdirectives-vue-v-model-guide.es",[698,699,702,703],{"tag":557,"color":558},{"tag":700,"color":701},"Formularios","#E67E22",{"tag":41,"color":42},{"tag":208,"color":209},"O_hXXsF2G3Nazt5a_Ggj8OT6_GTMtHDuGhVbwudOzcU",{"id":706,"title":707,"cover":708,"coverAlt":709,"date":710,"description":711,"draft":11,"extension":12,"lab":13,"locale":14,"meta":712,"navigation":26,"path":718,"schemaOrg":719,"seo":723,"series":550,"seriesDescription":551,"seriesOrder":392,"seriesTitle":553,"slug":13,"stem":724,"tags":725,"__hash__":729},"blog\u002Fblog\u002Fdirectives-vue-v-on-guide.es.md","Directivas en Vue: v-on","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771022043\u002Fdirectives-vue-v-on-guide_hwtqel.png","Imagen temporal para portada del articulo sobre v-on en Vue","2026-02-13","Aprende a usar v-on en Vue con eventos del DOM, modificadores, atajos de teclado y buenas practicas para mantener componentes claros y mantenibles.",{"updatedAt":713,"coverCaption":513,"author":17,"keywords":714},"2026-02-13T10:30:00-05:00",[151,715,716,717,25,492],"v-on","eventos","event modifiers","\u002Fblog\u002Fdirectives-vue-v-on-guide.es",[720],{"headline":721,"author":722,"datePublished":713,"@type":32},"Directiva v-on en Vue: guia practica para manejar eventos",{"name":17,"@type":31},{"title":707,"description":711},"blog\u002Fdirectives-vue-v-on-guide.es",[726,727,728],{"tag":557,"color":558},{"tag":124,"color":125},{"tag":208,"color":209},"WAEXmV8fTD0ITkOvmyn62Tdvu5vw7wpMPNxDrqfLAt4",{"id":731,"title":732,"cover":733,"coverAlt":734,"date":735,"description":736,"draft":11,"extension":12,"lab":13,"locale":14,"meta":737,"navigation":26,"path":744,"schemaOrg":745,"seo":749,"series":550,"seriesDescription":551,"seriesOrder":419,"seriesTitle":553,"slug":13,"stem":750,"tags":751,"__hash__":756},"blog\u002Fblog\u002Fdirectives-vue-v-bind-guide.es.md","Directivas en Vue: v-bind","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1770849828\u002Fdirectives-vue-v-bind-guide_gqrgyj.png","Imagen temporal para portada del artículo sobre v-bind en Vue","2026-02-11","Aprende a usar v-bind en Vue desde lo más básico hasta patrones avanzados: atributos dinámicos, class\u002Fstyle reactivos, props en componentes y errores comunes.",{"updatedAt":738,"coverCaption":513,"author":17,"keywords":739},"2026-02-11T18:00:00-05:00",[151,740,741,742,743,25,492],"v-bind","atributos dinámicos","class binding","style binding","\u002Fblog\u002Fdirectives-vue-v-bind-guide.es",[746],{"headline":747,"author":748,"datePublished":738,"@type":32},"Directiva v-bind en Vue: guía de básico a avanzado",{"name":17,"@type":31},{"title":732,"description":736},"blog\u002Fdirectives-vue-v-bind-guide.es",[752,753,754,755],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":41,"color":42},{"tag":208,"color":209},"ggicPee9rp0vgescxGeL26jTmua2py715WKhjmXHpp0",{"id":758,"title":759,"cover":760,"coverAlt":761,"date":762,"description":763,"draft":11,"extension":12,"lab":13,"locale":14,"meta":764,"navigation":26,"path":770,"schemaOrg":771,"seo":775,"series":550,"seriesDescription":551,"seriesOrder":162,"seriesTitle":553,"slug":13,"stem":776,"tags":777,"__hash__":783},"blog\u002Fblog\u002Fdirectives-vue-v-for-guide.es.md","Directivas en Vue: v-for","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1770690176\u002Fdirectives-vue-v-for-guide_itbdds.png","Imagen temporal para portada del artículo sobre v-for en Vue","2026-02-10","Aprende a dominar v-for en Vue con ejemplos prácticos desde lo más básico hasta patrones avanzados, uso correcto de key, errores comunes y buenas prácticas en Composition API y Options API.",{"updatedAt":765,"coverCaption":513,"author":17,"keywords":766},"2026-02-09T21:30:00-05:00",[151,767,768,769,25,492,413],"v-for","listas","key","\u002Fblog\u002Fdirectives-vue-v-for-guide.es",[772],{"headline":773,"author":774,"datePublished":765,"@type":32},"Directiva v-for en Vue: guía completa de básico a avanzado",{"name":17,"@type":31},{"title":759,"description":763},"blog\u002Fdirectives-vue-v-for-guide.es",[778,779,781,782],{"tag":557,"color":558},{"tag":780,"color":42},"Listas",{"tag":590,"color":591},{"tag":208,"color":209},"h_Z-6C71ir_sIzxviVE8eEY3vMd8ZVXbADx8GTll9U8",{"id":785,"title":786,"cover":787,"coverAlt":788,"date":789,"description":790,"draft":11,"extension":12,"lab":13,"locale":14,"meta":791,"navigation":26,"path":800,"schemaOrg":801,"seo":805,"series":550,"seriesDescription":551,"seriesOrder":36,"seriesTitle":553,"slug":13,"stem":806,"tags":807,"__hash__":814},"blog\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es.md","Directivas en Vue: v-if, v-else y v-show","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771265982\u002Fdirectives-vue-v-if-v-else-v-show-guide_qmtjik.png","Ilustración conceptual del renderizado condicional en Vue.js","2026-02-05","Aprende a usar v-if, v-else y v-show en Vue con ejemplos claros, buenas prácticas y notas clave para elegir correctamente entre renderizado condicional y visibilidad.",{"updatedAt":792,"coverCaption":793,"author":17,"keywords":794},"2026-02-05T12:30:00-05:00","Renderizado condicional en Vue.js ilustrado por TODOvue",[151,795,796,797,798,799,25,492],"v-if","v-else","v-show","conditional rendering","directives","\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es",[802],{"headline":803,"author":804,"datePublished":792,"@type":32},"v-if, v-else y v-show en Vue: cuándo usar cada uno",{"name":17,"@type":31},{"title":786,"description":790},"blog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es",[808,809,812,813],{"tag":557,"color":558},{"tag":810,"color":811},"Renderizado Condicional","#E056FD",{"tag":590,"color":591},{"tag":208,"color":209},"b5lwqC2_R5GDZNjdpBMFknx2dcvVk_FQOPGFJOy4LmQ",{"id":816,"title":817,"cover":818,"coverAlt":817,"date":819,"description":820,"draft":11,"extension":12,"lab":13,"locale":14,"meta":821,"navigation":26,"path":825,"schemaOrg":826,"seo":830,"series":550,"seriesDescription":551,"seriesOrder":115,"seriesTitle":553,"slug":13,"stem":831,"tags":832,"__hash__":839},"blog\u002Fblog\u002Fvue-directives-overview.es.md","Directivas en Vue: Una Visión General","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1770161262\u002Fvue-directives-overview_qyrngz.png","2026-02-04","Explora las directivas esenciales de Vue.js, su sintaxis y casos de uso comunes.",{"updatedAt":657,"readingTime":82,"coverCaption":822,"author":17,"keywords":823},"Imagen destacada que representa las directivas en Vue.js.",[151,557,824,56],"Desarrollo Frontend","\u002Fblog\u002Fvue-directives-overview.es",[827],{"headline":817,"author":828,"datePublished":829,"@type":32},{"name":17,"@type":31},"2026-02-03T20:00:00-05:00",{"title":817,"description":820},"blog\u002Fvue-directives-overview.es",[833,834,835,836,837,838],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":810,"color":811},{"tag":780,"color":42},{"tag":41,"color":42},{"tag":208,"color":209},"JwLOQaBKN45DaJoFg7X918rNjFPTm8MZd7iOm0BuH68",{"id":841,"title":842,"cover":843,"coverAlt":842,"date":844,"description":845,"draft":11,"extension":12,"lab":13,"locale":14,"meta":846,"navigation":26,"path":852,"schemaOrg":853,"seo":857,"series":80,"seriesDescription":81,"seriesOrder":392,"seriesTitle":83,"slug":13,"stem":858,"tags":859,"__hash__":867},"blog\u002Fblog\u002Fmastering-renderless-components-vue-3.es.md","Patrones Avanzados en Vue 3: El Poder de los Renderless Components","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1769789805\u002Fmastering-renderless-components-vue-3_f5mqbs.png","2026-01-30","Explora cómo los Renderless Components en Vue 3 pueden mejorar la reutilización de código y la separación de lógica y presentación en tus aplicaciones.",{"updatedAt":67,"coverCaption":847,"author":17,"keywords":848},"Imagen destacada que representa el concepto de Renderless Components en Vue 3.",[72,849,850,851,824],"Renderless Components","Reutilización de Código","Patrones de Diseño","\u002Fblog\u002Fmastering-renderless-components-vue-3.es",[854],{"headline":842,"author":855,"datePublished":856,"@type":32},{"name":17,"@type":31},"2026-01-30T17:00:00-05:00",{"title":842,"description":845},"blog\u002Fmastering-renderless-components-vue-3.es",[860,861,863,864,865,866],{"tag":73,"color":88},{"tag":851,"color":862},"#9C27B0",{"tag":103,"color":119},{"tag":41,"color":42},{"tag":279,"color":280},{"tag":56,"color":57},"yhkSM0r6ZSd16RBB-_Wkgi8QVsIgmic3u6hkdzzyLog",{"id":869,"title":870,"cover":871,"coverAlt":870,"date":872,"description":873,"draft":11,"extension":12,"lab":13,"locale":14,"meta":874,"navigation":26,"path":880,"schemaOrg":881,"seo":885,"series":80,"seriesDescription":81,"seriesOrder":419,"seriesTitle":83,"slug":13,"stem":886,"tags":887,"__hash__":896},"blog\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.es.md","Provide e Inject en Vue 3: Guía definitiva para eliminar el Prop Drilling","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1769126104\u002Fvue-provide-inject-avoid-prop-drilling_pkd9s1.png","2026-01-23","Aprende a usar provide e inject en Vue.js para eliminar el Prop Drilling, gestionar la reactividad de forma segura con readonly y mejorar la arquitectura de tus componentes.",{"updatedAt":67,"coverCaption":875,"author":17,"keywords":876},"Provide e Inject en Vue 3 por TODOvue",[151,877,878,879,25,155],"Provide","Inject","Prop Drilling","\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.es",[882],{"headline":870,"author":883,"datePublished":884,"@type":32},{"name":17,"@type":31},"2026-01-22T23:30:00-05:00",{"title":870,"description":873},"blog\u002Fvue-provide-inject-avoid-prop-drilling.es",[888,891,892,893,894,895],{"tag":889,"color":890},"Inyección de Dependencias","#2E86DE",{"tag":44,"color":45},{"tag":73,"color":88},{"tag":851,"color":862},{"tag":103,"color":119},{"tag":56,"color":57},"CBAqb072PTyDEOYcOpi9rvDl3rIQYoWB3nPWEjCk12M",{"id":898,"title":899,"cover":900,"coverAlt":901,"date":902,"description":903,"draft":11,"extension":12,"lab":904,"locale":14,"meta":914,"navigation":26,"path":920,"schemaOrg":921,"seo":925,"series":34,"seriesDescription":35,"seriesOrder":115,"seriesTitle":37,"slug":13,"stem":926,"tags":927,"__hash__":933},"blog\u002Fblog\u002Fvue-reactivity-explained.es.md","¿Qué es la reactividad? La magia detrás de Vue.js explicada con claridad","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1767664201\u002Fmagical_vue_coding_laboratory_p1incq.jpg","Ilustración de un laboratorio de codificación mágica de Vue.js","2026-01-06","Explora el sistema de reactividad de Vue.js, desde analogías simples hasta su implementación técnica con Proxies, y aprende a optimizar tus aplicaciones.",{"title":905,"goal":906,"tasks":907,"starterCode":912,"solutionHint":913},"Construye un contador reactivo pequeno","Practica la diferencia entre estado, estado derivado y efectos creando un contador pequeno con primitivas de reactividad de Vue.",[908,909,910,911],"Crea un contador con ref() y muestra su valor actual.","Agrega un computed que duplique el contador.","Usa watch() para registrar cuando el contador llegue a 5.","Explica en una frase que lecturas se rastrean y que escrituras disparan actualizaciones.","\u003Cscript setup>\nimport { computed, ref, watch } from 'vue'\n\nconst count = ref(0)\nconst doubled = computed(() => count.value * 2)\n\nwatch(count, (value) => {\n  if (value === 5) {\n    console.log('El contador llego a 5')\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Contador: {{ count }}\u003C\u002Fbutton>\n  \u003Cp>Doble: {{ doubled }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","El template y el getter de computed leen count, por eso Vue rastrea esas dependencias. Al hacer clic en el boton se escribe en count, asi que Vue dispara las actualizaciones dependientes.",{"updatedAt":148,"coverCaption":915,"author":17,"keywords":916},"Ilustración de un laboratorio de codificación mágica de Vue.js por TODOvue",[151,41,917,25,918,919],"Proxies","ref","reactive","\u002Fblog\u002Fvue-reactivity-explained.es",[922],{"headline":899,"author":923,"datePublished":924,"@type":32},{"name":17,"@type":31},"2026-01-05T22:00:00-05:00",{"title":899,"description":903},"blog\u002Fvue-reactivity-explained.es",[928,929,930],{"tag":41,"color":42},{"tag":208,"color":209},{"tag":931,"color":932},"Historia","#F27E68","UT2z0_WltHsFRpzRs-XkCaBzok7q9HIAWFb_2lDXzwk",{"id":935,"title":936,"cover":937,"coverAlt":938,"date":939,"description":940,"draft":11,"extension":12,"lab":13,"locale":14,"meta":941,"navigation":26,"path":945,"schemaOrg":946,"seo":950,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":951,"tags":952,"__hash__":964},"blog\u002Fblog\u002Fvue-beta-vapor-mode-revealed.es.md","Vue 3.6 Beta: La Revolución de Vapor Mode y el Nuevo Motor de Reactividad","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766870280\u002Fvue-beta-vapor-mode-revealed_snvcqg.png","Logo de Vue.js sobre un fondo de código fuente","2025-12-27","Explora las novedades de Vue 3.6 Beta, incluyendo Vapor Mode y la integración de alien-signals para una reactividad más eficiente.",{"updatedAt":942,"coverCaption":943,"author":17,"keywords":944},"2026-02-11T00:00:00-05:00","Descubre las innovaciones de Vue 3.6 Beta: Vapor Mode y un motor de reactividad renovado","vue 3.6, vapor mode, alien-signals, reactividad, javascript, framework, frontend, beta","\u002Fblog\u002Fvue-beta-vapor-mode-revealed.es",[947],{"headline":936,"author":948,"datePublished":949,"@type":32},{"name":17,"@type":31},"2025-12-27T00:00:00-05",{"title":936,"description":940},"blog\u002Fvue-beta-vapor-mode-revealed.es",[953,956,959,960,963],{"tag":954,"color":955},"Beta","#42B883",{"tag":957,"color":958},"Vapor Mode","#41B2A6",{"tag":41,"color":42},{"tag":961,"color":962},"Ecosistema","#68D4F2",{"tag":279,"color":280},"OoT1wXBWbx7Nm_VxKBcOVEX_68taHaHv5lb5JWYp_3Q",{"id":966,"title":967,"cover":968,"coverAlt":969,"date":970,"description":971,"draft":11,"extension":12,"lab":13,"locale":14,"meta":972,"navigation":26,"path":974,"schemaOrg":975,"seo":979,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":980,"tags":981,"__hash__":987},"blog\u002Fblog\u002Fsetting-up-vue-with-vite.es.md","¿Cómo crear tu primer proyecto con Vue usando Vite?","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766607505\u002Fsetting_up_vue_with_vite_crikmp.png","Logo de Vue.js con el logo de Vite de fondo","2025-12-24","Una guía paso a paso para configurar un entorno de desarrollo moderno con Vue.js y Vite.",{"updatedAt":942,"coverCaption":973},"Configura tu entorno de desarrollo con Vue y Vite en minutos","\u002Fblog\u002Fsetting-up-vue-with-vite.es",[976],{"headline":967,"author":977,"datePublished":978,"@type":32},{"name":17,"@type":31},"2025-12-24T00:00:00-05",{"title":967,"description":971},"blog\u002Fsetting-up-vue-with-vite.es",[982,985,986],{"tag":983,"color":984},"Vite","#646CFF",{"tag":961,"color":962},{"tag":208,"color":209},"MUgSVDrbxUy7t0OhAKC7RQ8Mxme-tp8kojsvtX1_Uoo",{"id":989,"title":990,"cover":991,"coverAlt":992,"date":993,"description":994,"draft":11,"extension":12,"lab":13,"locale":14,"meta":995,"navigation":26,"path":997,"schemaOrg":998,"seo":1002,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1003,"tags":1004,"__hash__":1007},"blog\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es.md","Historia y Evolución de Vue.js: El Framework Progresivo","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766105778\u002Fhistoria_de_vue_wbwv72.png","Logo de Vue.js con fondo de código fuente","2025-12-19","Desde sus inicios como un proyecto paralelo en Google hasta convertirse en uno de los pilares del desarrollo web moderno, exploramos la evolución y filosofía de Vue.js.",{"updatedAt":942,"coverCaption":996},"Explorando la evolución de Vue.js desde sus inicios hasta la actualidad","\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es",[999],{"headline":990,"author":1000,"datePublished":1001,"@type":32},{"name":17,"@type":31},"2025-12-19T00:00:00-05",{"title":990,"description":994},"blog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es",[1005,1006],{"tag":931,"color":932},{"tag":961,"color":962},"rJyCA4jjvQiJ_sw3YqFOoiddKcMhFEHJpq4Aw3J5Uzg",{"id":1009,"title":1010,"cover":1011,"coverAlt":938,"date":1012,"description":1013,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1014,"navigation":26,"path":1017,"schemaOrg":1018,"seo":1022,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1023,"tags":1024,"__hash__":1028},"blog\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es.md","¿Qué es Vue.js y por qué deberías usarlo?","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766098457\u002FQue_es_Vue_y_por_que_deberias_usarlo_tmowoz.png","2025-12-18","Descubre Vue.js, un framework progresivo de JavaScript, y aprende por qué es una excelente opción para desarrollar aplicaciones web modernas y reactivas.",{"updatedAt":942,"coverCaption":1015,"author":17,"keywords":1016},"Explorando Vue.js: El framework progresivo para la web moderna","vue.js, javascript, framework, frontend, spa, reactividad, composition api, vue 3","\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es",[1019],{"headline":1010,"author":1020,"datePublished":1021,"@type":32},{"name":17,"@type":31},"2025-12-18T00:00:00-05",{"title":1010,"description":1013},"blog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es",[1025,1026,1027],{"tag":961,"color":962},{"tag":208,"color":209},{"tag":931,"color":932},"3oUGsbaCuwOgI_KyRJd-09Ixe2vRBkwOj4YxwJT8Nks",{"id":1030,"title":1031,"cover":1032,"coverAlt":1033,"date":1034,"description":1035,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1036,"navigation":26,"path":1038,"schemaOrg":1039,"seo":1043,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1044,"tags":1045,"__hash__":1051},"blog\u002Fblog\u002Fwelcome-to-todovue.es.md","TODOvue: Un espacio dedicado al ecosistema de Vue.js","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766098456\u002FTODOvue_idegxt.png","Logo de TODOvue con código fuente de fondo","2025-12-17","Bienvenidos a TODOvue. Un blog técnico diseñado por y para desarrolladores, donde exploramos a fondo Vue 3, Nuxt y la arquitectura de componentes moderna.",{"updatedAt":942,"coverCaption":1037},"Explorando el universo de Vue.js de principio a fin","\u002Fblog\u002Fwelcome-to-todovue.es",[1040],{"headline":1031,"author":1041,"datePublished":1042,"@type":32},{"name":17,"@type":31},"2025-12-17T00:00:00-05:00",{"title":1031,"description":1035},"blog\u002Fwelcome-to-todovue.es",[1046,1047,1050],{"tag":17,"color":955},{"tag":1048,"color":1049},"Offtopic","#605AD1",{"tag":961,"color":962},"QCC1KEhGX4J18VW5hhPy_dY_G47DK7o6kElWExWVHwg",[1053,1083,1096,1119,1131,1152,1164,1187,1199,1221,1233,1255,1267,1288,1299,1322,1335,1358,1370,1390,1402,1421,1430,1457,1471,1493,1506,1534,1548,1566,1576,1601,1615,1646,1660,1690,1704,1725,1737,1758,1770,1800,1814,1835,1849,1872,1884,1906,1918,1938,1950,1971,1983,2003,2015,2037,2050,2072,2085,2104,2115,2136,2149,2171,2185,2214,2227,2245,2255,2274],{"id":1054,"title":1055,"cover":534,"coverAlt":1056,"date":536,"description":1057,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1059,"navigation":26,"path":1062,"schemaOrg":1063,"seo":1067,"series":550,"seriesDescription":1068,"seriesOrder":552,"seriesTitle":1069,"slug":13,"stem":1070,"tags":1071,"__hash__":1082},"blog\u002Fblog\u002Fdirectives-vue-custom-directives-guide.en.md","Vue Directives: Custom Directives","Example of a custom directive in Vue 3","Learn how to create custom directives in Vue 3 with real-world cases, lifecycle hooks, proper cleanup, and equivalent Composition API and Options API examples.","en",{"updatedAt":539,"coverCaption":1056,"author":17,"keywords":1060},[151,542,1061,25,492],"directive lifecycle","\u002Fblog\u002Fdirectives-vue-custom-directives-guide.en",[1064],{"headline":1065,"author":1066,"datePublished":539,"@type":32},"Custom Directives in Vue 3",{"name":17,"@type":31},{"title":1055,"description":1057},"A step-by-step path to master Vue core directives.","Vue Directives","blog\u002Fdirectives-vue-custom-directives-guide.en",[1072,1074,1076,1078,1080],{"tag":1073,"color":558},"Directives",{"tag":1075,"color":561},"Custom Directives",{"tag":1077,"color":88},"Architecture",{"tag":1079,"color":42},"Reactivity",{"tag":1081,"color":280},"Advanced","VbWd4b36KntGtlVvxTEiDtcGMmtX119Q4P6hsGOcxHE",{"id":532,"title":533,"cover":534,"coverAlt":535,"date":536,"description":537,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1084,"navigation":26,"path":544,"schemaOrg":1086,"seo":1089,"series":550,"seriesDescription":551,"seriesOrder":552,"seriesTitle":553,"slug":13,"stem":554,"tags":1090,"__hash__":565},{"updatedAt":539,"coverCaption":535,"author":17,"keywords":1085},[151,541,542,543,25,492],[1087],{"headline":547,"author":1088,"datePublished":539,"@type":32},{"name":17,"@type":31},{"title":533,"description":537},[1091,1092,1093,1094,1095],{"tag":557,"color":558},{"tag":560,"color":561},{"tag":73,"color":88},{"tag":41,"color":42},{"tag":279,"color":280},{"id":1097,"title":1098,"cover":733,"coverAlt":1099,"date":735,"description":1100,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1101,"navigation":26,"path":1105,"schemaOrg":1106,"seo":1110,"series":550,"seriesDescription":1068,"seriesOrder":419,"seriesTitle":1069,"slug":13,"stem":1111,"tags":1112,"__hash__":1118},"blog\u002Fblog\u002Fdirectives-vue-v-bind-guide.en.md","Vue Directive: v-bind","Temporary cover image for the Vue v-bind article","Learn how to use v-bind in Vue from basic syntax to advanced patterns: dynamic attributes, reactive class\u002Fstyle bindings, component props, and common mistakes.",{"updatedAt":738,"coverCaption":1102,"author":17,"keywords":1103},"Temporary cover: replace with TODOvue final artwork",[151,740,1104,742,743,25,492],"dynamic attributes","\u002Fblog\u002Fdirectives-vue-v-bind-guide.en",[1107],{"headline":1108,"author":1109,"datePublished":738,"@type":32},"Vue directive v-bind: guide from basic to advanced",{"name":17,"@type":31},{"title":1098,"description":1100},"blog\u002Fdirectives-vue-v-bind-guide.en",[1113,1114,1115,1116],{"tag":1073,"color":558},{"tag":590,"color":591},{"tag":1079,"color":42},{"tag":1117,"color":209},"Basics","fBQPYAMVg07MPh1WzK72iS9TKXH9Qc-lEO0tLvQWAN0",{"id":731,"title":732,"cover":733,"coverAlt":734,"date":735,"description":736,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1120,"navigation":26,"path":744,"schemaOrg":1122,"seo":1125,"series":550,"seriesDescription":551,"seriesOrder":419,"seriesTitle":553,"slug":13,"stem":750,"tags":1126,"__hash__":756},{"updatedAt":738,"coverCaption":513,"author":17,"keywords":1121},[151,740,741,742,743,25,492],[1123],{"headline":747,"author":1124,"datePublished":738,"@type":32},{"name":17,"@type":31},{"title":732,"description":736},[1127,1128,1129,1130],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":41,"color":42},{"tag":208,"color":209},{"id":1132,"title":1133,"cover":569,"coverAlt":1134,"date":571,"description":1135,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1136,"navigation":26,"path":1138,"schemaOrg":1139,"seo":1143,"series":550,"seriesDescription":1068,"seriesOrder":585,"seriesTitle":1069,"slug":13,"stem":1144,"tags":1145,"__hash__":1151},"blog\u002Fblog\u002Fdirectives-vue-v-cloak-guide.en.md","Vue Directives: v-cloak","Temporary cover image for the article about v-cloak in Vue","Learn how to use v-cloak in Vue 3 to prevent template flicker before mount, with Composition API and Options API, real-world use cases, common mistakes, and best practices.",{"updatedAt":574,"coverCaption":1102,"author":17,"keywords":1137},[151,576,577,578,25,492],"\u002Fblog\u002Fdirectives-vue-v-cloak-guide.en",[1140],{"headline":1141,"author":1142,"datePublished":574,"@type":32},"Vue v-cloak directive: prevent flicker before mount",{"name":17,"@type":31},{"title":1133,"description":1135},"blog\u002Fdirectives-vue-v-cloak-guide.en",[1146,1147,1148,1150],{"tag":1073,"color":558},{"tag":590,"color":591},{"tag":1149,"color":310},"Rendering",{"tag":1117,"color":209},"Kf5pI7WVFhWeTfW1PqIvromZ6MG-djhL5X9GlIvIaZ0",{"id":567,"title":568,"cover":569,"coverAlt":570,"date":571,"description":572,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1153,"navigation":26,"path":579,"schemaOrg":1155,"seo":1158,"series":550,"seriesDescription":551,"seriesOrder":585,"seriesTitle":553,"slug":13,"stem":586,"tags":1159,"__hash__":594},{"updatedAt":574,"coverCaption":513,"author":17,"keywords":1154},[151,576,577,578,25,492],[1156],{"headline":582,"author":1157,"datePublished":574,"@type":32},{"name":17,"@type":31},{"title":568,"description":572},[1160,1161,1162,1163],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":309,"color":310},{"tag":208,"color":209},{"id":1165,"title":1166,"cover":760,"coverAlt":1167,"date":762,"description":1168,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1169,"navigation":26,"path":1173,"schemaOrg":1174,"seo":1178,"series":550,"seriesDescription":1068,"seriesOrder":162,"seriesTitle":1069,"slug":13,"stem":1179,"tags":1180,"__hash__":1186},"blog\u002Fblog\u002Fdirectives-vue-v-for-guide.en.md","Vue Directives: v-for","Temporary cover image for the Vue v-for article","Learn to master v-for in Vue with practical examples from basics to advanced patterns, proper key usage, common mistakes, and best practices in Composition API and Options API.",{"updatedAt":765,"coverCaption":1102,"author":17,"keywords":1170},[151,767,1171,769,25,492,1172],"lists","rendering","\u002Fblog\u002Fdirectives-vue-v-for-guide.en",[1175],{"headline":1176,"author":1177,"datePublished":765,"@type":32},"Vue Directive v-for: complete guide from basic to advanced",{"name":17,"@type":31},{"title":1166,"description":1168},"blog\u002Fdirectives-vue-v-for-guide.en",[1181,1182,1184,1185],{"tag":1073,"color":558},{"tag":1183,"color":42},"Lists",{"tag":590,"color":591},{"tag":1117,"color":209},"UFj_zyUjat0RaIxcb3eGzm3JGeelMhT3VErvynARU6U",{"id":758,"title":759,"cover":760,"coverAlt":761,"date":762,"description":763,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1188,"navigation":26,"path":770,"schemaOrg":1190,"seo":1193,"series":550,"seriesDescription":551,"seriesOrder":162,"seriesTitle":553,"slug":13,"stem":776,"tags":1194,"__hash__":783},{"updatedAt":765,"coverCaption":513,"author":17,"keywords":1189},[151,767,768,769,25,492,413],[1191],{"headline":773,"author":1192,"datePublished":765,"@type":32},{"name":17,"@type":31},{"title":759,"description":763},[1195,1196,1197,1198],{"tag":557,"color":558},{"tag":780,"color":42},{"tag":590,"color":591},{"tag":208,"color":209},{"id":1200,"title":1201,"cover":787,"coverAlt":1202,"date":789,"description":1203,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1204,"navigation":26,"path":1207,"schemaOrg":1208,"seo":1212,"series":550,"seriesDescription":1068,"seriesOrder":36,"seriesTitle":1069,"slug":13,"stem":1213,"tags":1214,"__hash__":1220},"blog\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.en.md","Vue Directives: v-if, v-else, and v-show","Conceptual illustration of conditional rendering in Vue.js","Learn how to use v-if, v-else, and v-show in Vue with clear examples, best practices, and key notes to correctly choose between conditional rendering and visibility.",{"updatedAt":792,"coverCaption":1205,"author":17,"keywords":1206},"Conditional rendering in Vue.js illustrated by TODOvue",[151,795,796,797,798,799,25,492],"\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.en",[1209],{"headline":1210,"author":1211,"datePublished":792,"@type":32},"v-if, v-else, and v-show in Vue: when to use each one",{"name":17,"@type":31},{"title":1201,"description":1203},"blog\u002Fdirectives-vue-v-if-v-else-v-show-guide.en",[1215,1216,1218,1219],{"tag":1073,"color":558},{"tag":1217,"color":811},"Conditional Rendering",{"tag":590,"color":591},{"tag":1117,"color":209},"bonHJEZKR8mgY6TlnDzH6GuTIBa7iVkuk37Bj00v7gA",{"id":785,"title":786,"cover":787,"coverAlt":788,"date":789,"description":790,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1222,"navigation":26,"path":800,"schemaOrg":1224,"seo":1227,"series":550,"seriesDescription":551,"seriesOrder":36,"seriesTitle":553,"slug":13,"stem":806,"tags":1228,"__hash__":814},{"updatedAt":792,"coverCaption":793,"author":17,"keywords":1223},[151,795,796,797,798,799,25,492],[1225],{"headline":803,"author":1226,"datePublished":792,"@type":32},{"name":17,"@type":31},{"title":786,"description":790},[1229,1230,1231,1232],{"tag":557,"color":558},{"tag":810,"color":811},{"tag":590,"color":591},{"tag":208,"color":209},{"id":1234,"title":1235,"cover":680,"coverAlt":1236,"date":682,"description":1237,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1238,"navigation":26,"path":1241,"schemaOrg":1242,"seo":1246,"series":550,"seriesDescription":1068,"seriesOrder":82,"seriesTitle":1069,"slug":13,"stem":1247,"tags":1248,"__hash__":1254},"blog\u002Fblog\u002Fdirectives-vue-v-model-guide.en.md","Vue Directives: v-model","Temporary cover image for the article about v-model in Vue","Learn how to use v-model in Vue 3 for forms and custom components, with Composition API and Options API, real-world cases, common mistakes, and best practices.",{"updatedAt":685,"coverCaption":1102,"author":17,"keywords":1239},[151,687,1240,689,25,492],"forms","\u002Fblog\u002Fdirectives-vue-v-model-guide.en",[1243],{"headline":1244,"author":1245,"datePublished":685,"@type":32},"Vue v-model directive: complete guide for forms and components",{"name":17,"@type":31},{"title":1235,"description":1237},"blog\u002Fdirectives-vue-v-model-guide.en",[1249,1250,1252,1253],{"tag":1073,"color":558},{"tag":1251,"color":701},"Forms",{"tag":1079,"color":42},{"tag":1117,"color":209},"uLZjrfCHAQykPqywL7eBldBK5SWJV2OW6O4HVH8Uau4",{"id":678,"title":679,"cover":680,"coverAlt":681,"date":682,"description":683,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1256,"navigation":26,"path":690,"schemaOrg":1258,"seo":1261,"series":550,"seriesDescription":551,"seriesOrder":82,"seriesTitle":553,"slug":13,"stem":696,"tags":1262,"__hash__":704},{"updatedAt":685,"coverCaption":513,"author":17,"keywords":1257},[151,687,688,689,25,492],[1259],{"headline":693,"author":1260,"datePublished":685,"@type":32},{"name":17,"@type":31},{"title":679,"description":683},[1263,1264,1265,1266],{"tag":557,"color":558},{"tag":700,"color":701},{"tag":41,"color":42},{"tag":208,"color":209},{"id":1268,"title":1269,"cover":708,"coverAlt":1270,"date":710,"description":1271,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1272,"navigation":26,"path":1275,"schemaOrg":1276,"seo":1280,"series":550,"seriesDescription":1068,"seriesOrder":392,"seriesTitle":1069,"slug":13,"stem":1281,"tags":1282,"__hash__":1287},"blog\u002Fblog\u002Fdirectives-vue-v-on-guide.en.md","Vue Directives: v-on","Temporary cover image for the Vue v-on article","Learn how to use v-on in Vue with DOM events, modifiers, keyboard shortcuts, and best practices to keep components clear and maintainable.",{"updatedAt":713,"coverCaption":1102,"author":17,"keywords":1273},[151,715,1274,717,25,492],"events","\u002Fblog\u002Fdirectives-vue-v-on-guide.en",[1277],{"headline":1278,"author":1279,"datePublished":713,"@type":32},"Vue v-on directive: practical guide to handling events",{"name":17,"@type":31},{"title":1269,"description":1271},"blog\u002Fdirectives-vue-v-on-guide.en",[1283,1284,1286],{"tag":1073,"color":558},{"tag":1285,"color":125},"Events",{"tag":1117,"color":209},"6NNAbfSjJpuIDdqe4vOBuTowez_W0dYKeqWzU22o9xo",{"id":706,"title":707,"cover":708,"coverAlt":709,"date":710,"description":711,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1289,"navigation":26,"path":718,"schemaOrg":1291,"seo":1294,"series":550,"seriesDescription":551,"seriesOrder":392,"seriesTitle":553,"slug":13,"stem":724,"tags":1295,"__hash__":729},{"updatedAt":713,"coverCaption":513,"author":17,"keywords":1290},[151,715,716,717,25,492],[1292],{"headline":721,"author":1293,"datePublished":713,"@type":32},{"name":17,"@type":31},{"title":707,"description":711},[1296,1297,1298],{"tag":557,"color":558},{"tag":124,"color":125},{"tag":208,"color":209},{"id":1300,"title":1301,"cover":598,"coverAlt":1302,"date":600,"description":1303,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1304,"navigation":26,"path":1307,"schemaOrg":1308,"seo":1312,"series":550,"seriesDescription":1068,"seriesOrder":268,"seriesTitle":1069,"slug":13,"stem":1313,"tags":1314,"__hash__":1321},"blog\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.en.md","Vue Directives: v-once \u002F v-memo \u002F v-pre","Temporary cover image for the article about v-once, v-memo, and v-pre in Vue","Learn when to use v-once, v-memo, and v-pre in Vue 3 to optimize rendering, avoid unnecessary work, and keep components clear.",{"updatedAt":603,"coverCaption":1102,"author":17,"keywords":1305},[151,605,606,607,1306],"render optimization","\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.en",[1309],{"headline":1310,"author":1311,"datePublished":603,"@type":32},"Vue Directives: v-once, v-memo, and v-pre for efficient rendering",{"name":17,"@type":31},{"title":1301,"description":1303},"blog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.en",[1315,1316,1318,1319,1320],{"tag":1073,"color":558},{"tag":1317,"color":169},"Performance",{"tag":1149,"color":310},{"tag":1079,"color":42},{"tag":1081,"color":280},"Hj5fbf6Q8rLBJrcGxfKq2EkiWbvWu2XgRjCqZs1Cjq4",{"id":596,"title":597,"cover":598,"coverAlt":599,"date":600,"description":601,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1323,"navigation":26,"path":609,"schemaOrg":1325,"seo":1328,"series":550,"seriesDescription":551,"seriesOrder":268,"seriesTitle":553,"slug":13,"stem":615,"tags":1329,"__hash__":622},{"updatedAt":603,"coverCaption":513,"author":17,"keywords":1324},[151,605,606,607,608],[1326],{"headline":612,"author":1327,"datePublished":603,"@type":32},{"name":17,"@type":31},{"title":597,"description":601},[1330,1331,1332,1333,1334],{"tag":557,"color":558},{"tag":168,"color":169},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":279,"color":280},{"id":1336,"title":1337,"cover":652,"coverAlt":1338,"date":654,"description":1339,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1340,"navigation":26,"path":1344,"schemaOrg":1345,"seo":1349,"series":550,"seriesDescription":1068,"seriesOrder":334,"seriesTitle":1069,"slug":13,"stem":1350,"tags":1351,"__hash__":1357},"blog\u002Fblog\u002Fdirectives-vue-v-slot-guide.en.md","Vue Directives: v-slot","Cover image for the Vue Directives: v-slot article","Learn to master v-slot in Vue 3: default slots, named slots, and scoped slots, with clear examples in Composition API and Options API.",{"updatedAt":657,"coverCaption":1341,"author":17,"keywords":1342},"Use v-slot to build more flexible and reusable components.",[151,660,661,662,1343,25,492],"reusable components","\u002Fblog\u002Fdirectives-vue-v-slot-guide.en",[1346],{"headline":1347,"author":1348,"datePublished":657,"@type":32},"Vue Directives: v-slot with clear and practical examples",{"name":17,"@type":31},{"title":1337,"description":1339},"blog\u002Fdirectives-vue-v-slot-guide.en",[1352,1353,1354,1356],{"tag":1073,"color":558},{"tag":127,"color":128},{"tag":1355,"color":119},"Components",{"tag":1081,"color":280},"bpGFw5Kv-DUZFXKYxYUPbQ1r9-YjesJZbWQG6CsKKsE",{"id":650,"title":651,"cover":652,"coverAlt":653,"date":654,"description":655,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1359,"navigation":26,"path":664,"schemaOrg":1361,"seo":1364,"series":550,"seriesDescription":551,"seriesOrder":334,"seriesTitle":553,"slug":13,"stem":670,"tags":1365,"__hash__":676},{"updatedAt":657,"coverCaption":658,"author":17,"keywords":1360},[151,660,661,662,663,25,492],[1362],{"headline":667,"author":1363,"datePublished":657,"@type":32},{"name":17,"@type":31},{"title":651,"description":655},[1366,1367,1368,1369],{"tag":557,"color":558},{"tag":127,"color":128},{"tag":103,"color":119},{"tag":279,"color":280},{"id":1371,"title":1372,"cover":626,"coverAlt":1373,"date":628,"description":1374,"draft":11,"extension":12,"lab":13,"locale":13,"meta":1375,"navigation":26,"path":1378,"schemaOrg":1379,"seo":1382,"series":550,"seriesDescription":1068,"seriesOrder":255,"seriesTitle":1069,"slug":13,"stem":1383,"tags":1384,"__hash__":1389},"blog\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.en.md","Vue Directives: v-text and v-html","Example of v-text and v-html usage in Vue.js","Learn when to use v-text and v-html in Vue, key differences, security risks, common mistakes, and recommended patterns with Composition API and Options API examples.",{"updatedAt":631,"coverCaption":1376,"keywords":1377},"Learn to use v-text and v-html safely and effectively in your Vue projects",[151,634,635,636,1172,25,492],"\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.en",[1380],{"headline":1372,"author":1381,"datePublished":631,"@type":32},{"name":17,"@type":31},{"title":1372,"description":1374},"blog\u002Fdirectives-vue-v-text-v-html-guide.en",[1385,1386,1387,1388],{"tag":1073,"color":558},{"tag":590,"color":591},{"tag":1149,"color":310},{"tag":1117,"color":209},"yJ0I84sIINMrCqyUm2OeYmKCDocgvpf933S_GU-SkCs",{"id":624,"title":625,"cover":626,"coverAlt":627,"date":628,"description":629,"draft":11,"extension":12,"lab":13,"locale":13,"meta":1391,"navigation":26,"path":637,"schemaOrg":1393,"seo":1396,"series":550,"seriesDescription":551,"seriesOrder":255,"seriesTitle":553,"slug":13,"stem":642,"tags":1397,"__hash__":648},{"updatedAt":631,"coverCaption":632,"keywords":1392},[151,634,635,636,413,25,492],[1394],{"headline":625,"author":1395,"datePublished":631,"@type":32},{"name":17,"@type":31},{"title":625,"description":629},[1398,1399,1400,1401],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":309,"color":310},{"tag":208,"color":209},{"id":1403,"title":1404,"cover":991,"coverAlt":1405,"date":993,"description":1406,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1407,"navigation":26,"path":1409,"schemaOrg":1410,"seo":1413,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1414,"tags":1415,"__hash__":1420},"blog\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.en.md","History and Evolution of Vue.js: The Progressive Framework","Vue.js logo with source code background","From its beginnings as a side project at Google to becoming one of the pillars of modern web development, we explore the evolution and philosophy of Vue.js.",{"updatedAt":942,"coverCaption":1408},"Exploring the evolution of Vue.js from its beginnings to the present","\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.en",[1411],{"headline":1404,"author":1412,"datePublished":1001,"@type":32},{"name":17,"@type":31},{"title":1404,"description":1406},"blog\u002Fhistory-evolution-philosophy-vue-progressive-framework.en",[1416,1418],{"tag":1417,"color":932},"History",{"tag":1419,"color":962},"Ecosystem","86Hf4-SvaPOgGH9d6AXakQYnxfqwNUiVvGtH6uVqOgA",{"id":989,"title":990,"cover":991,"coverAlt":992,"date":993,"description":994,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1422,"navigation":26,"path":997,"schemaOrg":1423,"seo":1426,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1003,"tags":1427,"__hash__":1007},{"updatedAt":942,"coverCaption":996},[1424],{"headline":990,"author":1425,"datePublished":1001,"@type":32},{"name":17,"@type":31},{"title":990,"description":994},[1428,1429],{"tag":931,"color":932},{"tag":961,"color":962},{"id":1431,"title":1432,"cover":843,"coverAlt":1432,"date":844,"description":1433,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1434,"navigation":26,"path":1440,"schemaOrg":1441,"seo":1444,"series":80,"seriesDescription":1445,"seriesOrder":392,"seriesTitle":1446,"slug":13,"stem":1447,"tags":1448,"__hash__":1456},"blog\u002Fblog\u002Fmastering-renderless-components-vue-3.en.md","Advanced Patterns in Vue 3: The Power of Renderless Components","Discover how Renderless Components in Vue 3 can improve code reuse and the separation of logic and presentation in your applications.",{"updatedAt":67,"coverCaption":1435,"author":17,"keywords":1436},"Featured image representing the Renderless Components concept in Vue 3.",[72,849,1437,1438,1439],"Code Reuse","Design Patterns","Frontend Development","\u002Fblog\u002Fmastering-renderless-components-vue-3.en",[1442],{"headline":1432,"author":1443,"datePublished":856,"@type":32},{"name":17,"@type":31},{"title":1432,"description":1433},"A practical series for designing maintainable Vue 3 applications through clear component communication, reusable logic, scoped dependencies, and intentional state management.","Vue 3 Application Architecture","blog\u002Fmastering-renderless-components-vue-3.en",[1449,1450,1451,1452,1453,1454],{"tag":1077,"color":88},{"tag":1438,"color":862},{"tag":1355,"color":119},{"tag":1079,"color":42},{"tag":1081,"color":280},{"tag":1455,"color":57},"Best Practices","qGlDdtQOF8gO_Wm956KACJvdCpR5gS70nFJkqaynUAA",{"id":841,"title":842,"cover":843,"coverAlt":842,"date":844,"description":845,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1458,"navigation":26,"path":852,"schemaOrg":1460,"seo":1463,"series":80,"seriesDescription":81,"seriesOrder":392,"seriesTitle":83,"slug":13,"stem":858,"tags":1464,"__hash__":867},{"updatedAt":67,"coverCaption":847,"author":17,"keywords":1459},[72,849,850,851,824],[1461],{"headline":842,"author":1462,"datePublished":856,"@type":32},{"name":17,"@type":31},{"title":842,"description":845},[1465,1466,1467,1468,1469,1470],{"tag":73,"color":88},{"tag":851,"color":862},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":279,"color":280},{"tag":56,"color":57},{"id":1472,"title":1473,"cover":62,"coverAlt":1474,"date":64,"description":1475,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1476,"navigation":26,"path":1480,"schemaOrg":1481,"seo":1484,"series":80,"seriesDescription":1445,"seriesOrder":82,"seriesTitle":1446,"slug":13,"stem":1485,"tags":1486,"__hash__":1492},"blog\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.en.md","Pinia in Vue 3: When to Use Global State and When Not To","Decision diagram for choosing between local state, props and events, composables, or Pinia in Vue 3.","Learn how to decide whether data belongs in a component, a subtree, or a Pinia store based on its consumers, lifetime, and shared logic.",{"updatedAt":67,"author":17,"coverCaption":1477,"keywords":1478},"Visual reference for deciding the scope of state in Vue 3.",[70,71,72,1479,1077,50],"State Management","\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.en",[1482],{"headline":1473,"author":1483,"datePublished":78,"@type":32},{"name":17,"@type":31},{"title":1473,"description":1475},"blog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.en",[1487,1488,1489,1490,1491],{"tag":1479,"color":45},{"tag":1077,"color":88},{"tag":1455,"color":57},{"tag":50,"color":51},{"tag":53,"color":54},"UewqiLTUycHX3tO-n_BB7cm5btgrQ5mc7oo806mgnC4",{"id":60,"title":61,"cover":62,"coverAlt":63,"date":64,"description":65,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1494,"navigation":26,"path":74,"schemaOrg":1496,"seo":1499,"series":80,"seriesDescription":81,"seriesOrder":82,"seriesTitle":83,"slug":13,"stem":84,"tags":1500,"__hash__":92},{"updatedAt":67,"author":17,"coverCaption":68,"keywords":1495},[70,71,72,44,73,50],[1497],{"headline":61,"author":1498,"datePublished":78,"@type":32},{"name":17,"@type":31},{"title":61,"description":65},[1501,1502,1503,1504,1505],{"tag":44,"color":45},{"tag":73,"color":88},{"tag":56,"color":57},{"tag":50,"color":51},{"tag":53,"color":54},{"id":1507,"title":1508,"cover":7,"coverAlt":1509,"date":9,"description":1510,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1511,"navigation":26,"path":1517,"schemaOrg":1518,"seo":1521,"series":34,"seriesDescription":1522,"seriesOrder":36,"seriesTitle":1523,"slug":13,"stem":1524,"tags":1525,"__hash__":1533},"blog\u002Fblog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.en.md","ref() vs reactive(): How to Model State in Vue 3","Comparison of ref() and reactive() for modeling reactive state in Vue 3","Learn how to choose between ref(), reactive(), toRefs(), and useState() based on data shape, destructuring, and SSR scope.",{"updatedAt":16,"author":17,"coverCaption":1512,"keywords":1513},"Official Vue reference for reactivity fundamentals",[20,1514,1515,23,1516,25],"Vue 3 reactivity","state management in Vue 3","useState() in Nuxt","\u002Fblog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.en",[1519],{"headline":1508,"author":1520,"datePublished":16,"@type":32},{"name":17,"@type":31},{"title":1508,"description":1510},"A practical path to understand how Vue tracks state, choose the right reactive API, and optimize updates without losing clarity.","Practical Reactivity in Vue 3","blog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.en",[1526,1527,1528,1530,1531,1532],{"tag":1079,"color":42},{"tag":1479,"color":45},{"tag":1529,"color":48},"Guides",{"tag":50,"color":51},{"tag":53,"color":54},{"tag":1455,"color":57},"BRiiMY_53UgVUX64P98f-gAlbfTVJAu0KAoOV7vd9aE",{"id":5,"title":6,"cover":7,"coverAlt":8,"date":9,"description":10,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1535,"navigation":26,"path":27,"schemaOrg":1537,"seo":1540,"series":34,"seriesDescription":35,"seriesOrder":36,"seriesTitle":37,"slug":13,"stem":38,"tags":1541,"__hash__":58},{"updatedAt":16,"author":17,"coverCaption":18,"keywords":1536},[20,21,22,23,24,25],[1538],{"headline":6,"author":1539,"datePublished":16,"@type":32},{"name":17,"@type":31},{"title":6,"description":10},[1542,1543,1544,1545,1546,1547],{"tag":41,"color":42},{"tag":44,"color":45},{"tag":47,"color":48},{"tag":50,"color":51},{"tag":53,"color":54},{"tag":56,"color":57},{"id":1549,"title":1550,"cover":968,"coverAlt":1551,"date":970,"description":1552,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1553,"navigation":26,"path":1555,"schemaOrg":1556,"seo":1559,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1560,"tags":1561,"__hash__":1565},"blog\u002Fblog\u002Fsetting-up-vue-with-vite.en.md","How to create your first project with Vue using Vite?","Vue.js logo with Vite logo in the background","A step-by-step guide to setting up a modern development environment with Vue.js and Vite.",{"updatedAt":942,"coverCaption":1554},"Set up your development environment with Vue and Vite in minutes","\u002Fblog\u002Fsetting-up-vue-with-vite.en",[1557],{"headline":1550,"author":1558,"datePublished":978,"@type":32},{"name":17,"@type":31},{"title":1550,"description":1552},"blog\u002Fsetting-up-vue-with-vite.en",[1562,1563,1564],{"tag":983,"color":984},{"tag":1419,"color":962},{"tag":1117,"color":209},"O3zEzO8jD44RxaG_Jmwd3f-_von7aOGhiQAtx-EIhp4",{"id":966,"title":967,"cover":968,"coverAlt":969,"date":970,"description":971,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1567,"navigation":26,"path":974,"schemaOrg":1568,"seo":1571,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":980,"tags":1572,"__hash__":987},{"updatedAt":942,"coverCaption":973},[1569],{"headline":967,"author":1570,"datePublished":978,"@type":32},{"name":17,"@type":31},{"title":967,"description":971},[1573,1574,1575],{"tag":983,"color":984},{"tag":961,"color":962},{"tag":208,"color":209},{"id":1577,"title":1578,"cover":96,"coverAlt":1579,"date":98,"description":1580,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1581,"navigation":26,"path":1587,"schemaOrg":1588,"seo":1591,"series":80,"seriesDescription":1445,"seriesOrder":115,"seriesTitle":1446,"slug":13,"stem":1592,"tags":1593,"__hash__":1600},"blog\u002Fblog\u002Fvue-3-component-architecture.en.md","Vue 3 Component Architecture: Communication, Reuse, and Dependencies","Vue.js guide to architecture and reusable components","Learn when to use props, events, slots, fallthrough attributes, composables, and provide\u002Finject to design clear and maintainable Vue 3 components.",{"updatedAt":67,"author":17,"coverCaption":1582,"keywords":1583},"Official Vue.js reference for components",[1355,1584,1585,1586,107,108],"Vue 3 component architecture","props and events","slots in Vue 3","\u002Fblog\u002Fvue-3-component-architecture.en",[1589],{"headline":1578,"author":1590,"datePublished":113,"@type":32},{"name":17,"@type":31},{"title":1578,"description":1580},"blog\u002Fvue-3-component-architecture.en",[1594,1595,1596,1597,1598,1599],{"tag":1355,"color":119},{"tag":1077,"color":88},{"tag":1455,"color":57},{"tag":50,"color":51},{"tag":1285,"color":125},{"tag":127,"color":128},"y5iAKBYhJvT9hq0nPkRWhtFAHH_TP_2h4lxa9wTXpXU",{"id":94,"title":95,"cover":96,"coverAlt":97,"date":98,"description":99,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1602,"navigation":26,"path":109,"schemaOrg":1604,"seo":1607,"series":80,"seriesDescription":81,"seriesOrder":115,"seriesTitle":83,"slug":13,"stem":116,"tags":1608,"__hash__":129},{"updatedAt":67,"author":17,"coverCaption":101,"keywords":1603},[103,104,105,106,107,108],[1605],{"headline":95,"author":1606,"datePublished":113,"@type":32},{"name":17,"@type":31},{"title":95,"description":99},[1609,1610,1611,1612,1613,1614],{"tag":103,"color":119},{"tag":73,"color":88},{"tag":56,"color":57},{"tag":50,"color":51},{"tag":124,"color":125},{"tag":127,"color":128},{"id":1616,"title":1617,"cover":214,"coverAlt":1618,"date":216,"description":1619,"draft":11,"extension":12,"lab":1620,"locale":1058,"meta":1630,"navigation":26,"path":1634,"schemaOrg":1635,"seo":1638,"series":80,"seriesDescription":1445,"seriesOrder":162,"seriesTitle":1446,"slug":13,"stem":1639,"tags":1640,"__hash__":1645},"blog\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.en.md","Composables in Vue 3: How to Extract Reusable Logic Without Overcomplicating It","Screen showing code in a development environment","Learn what composables are in Vue 3, when they are worth using, and how to extract reusable logic with a clear useToggle example.",{"title":1621,"goal":1622,"tasks":1623,"starterCode":1628,"solutionHint":1629},"Create your first composable: useToggle","Extract a small, repeatable bit of logic for opening, closing, and toggling a boolean state from any component.",[1624,1625,1626,1627],"Create a useToggle.js or useToggle.ts file.","Use ref() to store the active or inactive state.","Expose the open(), close(), and toggle() functions.","Use the composable from a component with a button.","\u003Cscript setup>\nimport { ref } from 'vue'\n\nfunction useToggle(initialValue = false) {\n  const isActive = ref(initialValue)\n\n  const open = () => {\n    isActive.value = true\n  }\n\n  const close = () => {\n    isActive.value = false\n  }\n\n  const toggle = () => {\n    isActive.value = !isActive.value\n  }\n\n  return {\n    isActive,\n    open,\n    close,\n    toggle\n  }\n}\n\nconst menu = useToggle()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"menu.toggle()\">\n    {{ menu.isActive ? 'Close menu' : 'Open menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"menu.isActive\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n","If the component no longer needs to know how the state changes, only when to use it, the composable is doing its job.",{"updatedAt":67,"coverCaption":1631,"author":17,"keywords":1632},"Reusable code in Vue 3 by TODOvue",[151,72,50,25,231,1633],"reusable logic","\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.en",[1636],{"headline":1617,"author":1637,"datePublished":237,"@type":32},{"name":17,"@type":31},{"title":1617,"description":1619},"blog\u002Fvue-3-composables-extract-reusable-logic.en",[1641,1642,1643,1644],{"tag":50,"color":51},{"tag":1355,"color":119},{"tag":1455,"color":57},{"tag":1117,"color":209},"_xB-VUklmuqVsS7YFm685mXIKX7EAJTdSwOJ8dJRCpo",{"id":212,"title":213,"cover":214,"coverAlt":215,"date":216,"description":217,"draft":11,"extension":12,"lab":1647,"locale":14,"meta":1649,"navigation":26,"path":233,"schemaOrg":1651,"seo":1654,"series":80,"seriesDescription":81,"seriesOrder":162,"seriesTitle":83,"slug":13,"stem":239,"tags":1655,"__hash__":245},{"title":219,"goal":220,"tasks":1648,"starterCode":226,"solutionHint":227},[222,223,224,225],{"updatedAt":67,"coverCaption":229,"author":17,"keywords":1650},[151,72,50,25,231,232],[1652],{"headline":213,"author":1653,"datePublished":237,"@type":32},{"name":17,"@type":31},{"title":213,"description":217},[1656,1657,1658,1659],{"tag":50,"color":51},{"tag":103,"color":119},{"tag":56,"color":57},{"tag":208,"color":209},{"id":1661,"title":1662,"cover":175,"coverAlt":1662,"date":176,"description":1663,"draft":11,"extension":12,"lab":1664,"locale":1058,"meta":1674,"navigation":26,"path":1678,"schemaOrg":1679,"seo":1682,"series":80,"seriesDescription":1445,"seriesOrder":36,"seriesTitle":1446,"slug":13,"stem":1683,"tags":1684,"__hash__":1689},"blog\u002Fblog\u002Fvue-3-props-emits-component-communication.en.md","Props and Emits in Vue 3: Component Communication","Learn how to use props and emits in Vue 3 to pass data down to child components and communicate events back to parent components.",{"title":1665,"goal":1666,"tasks":1667,"starterCode":1672,"solutionHint":1673},"Create a task card with props and emits","Build a small component that receives a task through props and tells the parent when the user wants to mark it as complete.",[1668,1669,1670,1671],"Create a TaskCard.vue component.","Receive a task prop with title and completed fields.","Show the task state in the template.","Emit a complete event when the user clicks the button.","\u003C!-- TaskCard.vue -->\n\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst emit = defineEmits(['complete'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ props.task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ props.task.completed ? 'Completed' : 'Pending' }}\u003C\u002Fp>\n\n    \u003Cbutton @click=\"emit('complete', props.task.id)\">\n      Mark as complete\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","The child component does not need to change the list directly. It only communicates the intention; the parent decides how to update the state.",{"updatedAt":67,"coverCaption":1675,"author":17,"keywords":1676},"Component communication in Vue 3 by TODOvue",[151,72,191,192,1677,194,195],"components","\u002Fblog\u002Fvue-3-props-emits-component-communication.en",[1680],{"headline":1662,"author":1681,"datePublished":200,"@type":32},{"name":17,"@type":31},{"title":1662,"description":1663},"blog\u002Fvue-3-props-emits-component-communication.en",[1685,1686,1687,1688],{"tag":1355,"color":119},{"tag":1285,"color":125},{"tag":1529,"color":48},{"tag":1117,"color":209},"xd-XnN-bfGNjRmj3S-QUHtt09X5ATaKvCfIzQfx0Pg8",{"id":173,"title":174,"cover":175,"coverAlt":174,"date":176,"description":177,"draft":11,"extension":12,"lab":1691,"locale":14,"meta":1693,"navigation":26,"path":196,"schemaOrg":1695,"seo":1698,"series":80,"seriesDescription":81,"seriesOrder":36,"seriesTitle":83,"slug":13,"stem":202,"tags":1699,"__hash__":210},{"title":179,"goal":180,"tasks":1692,"starterCode":186,"solutionHint":187},[182,183,184,185],{"updatedAt":67,"coverCaption":189,"author":17,"keywords":1694},[151,72,191,192,193,194,195],[1696],{"headline":174,"author":1697,"datePublished":200,"@type":32},{"name":17,"@type":31},{"title":174,"description":177},[1700,1701,1702,1703],{"tag":103,"color":119},{"tag":124,"color":125},{"tag":47,"color":48},{"tag":208,"color":209},{"id":1705,"title":1706,"cover":509,"coverAlt":1707,"date":510,"description":1708,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1709,"navigation":26,"path":1713,"schemaOrg":1714,"seo":1717,"series":34,"seriesDescription":1522,"seriesOrder":392,"seriesTitle":1523,"slug":13,"stem":1718,"tags":1719,"__hash__":1724},"blog\u002Fblog\u002Fvue-3-reactivity-internals.en.md","How Vue 3 Reactivity Works Internally","How Vue 3 reactivity works internally","Technical breakdown of Vue 3's reactivity engine: dependency tracking, WeakMap->Map->Set structure, activeEffect, scheduler, batching, and real architecture pitfalls.",{"updatedAt":148,"coverCaption":1710,"author":17,"keywords":1711},"Temporary cover: replace with final TODOvue artwork",[72,1712,515,516,517,152],"reactivity","\u002Fblog\u002Fvue-3-reactivity-internals.en",[1715],{"headline":1706,"author":1716,"datePublished":522,"@type":32},{"name":17,"@type":31},{"title":1706,"description":1708},"blog\u002Fvue-3-reactivity-internals.en",[1720,1721,1722,1723],{"tag":1079,"color":42},{"tag":1077,"color":88},{"tag":1317,"color":169},{"tag":1081,"color":280},"WzLjg43hosqzidq6nDEWpPvr2Gu8HdggOceQx8Z255s",{"id":507,"title":508,"cover":509,"coverAlt":508,"date":510,"description":511,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1726,"navigation":26,"path":518,"schemaOrg":1728,"seo":1731,"series":34,"seriesDescription":35,"seriesOrder":392,"seriesTitle":37,"slug":13,"stem":524,"tags":1732,"__hash__":530},{"updatedAt":148,"coverCaption":513,"author":17,"keywords":1727},[72,155,515,516,517,152],[1729],{"headline":508,"author":1730,"datePublished":522,"@type":32},{"name":17,"@type":31},{"title":508,"description":511},[1733,1734,1735,1736],{"tag":41,"color":42},{"tag":73,"color":88},{"tag":168,"color":169},{"tag":279,"color":280},{"id":1738,"title":1739,"cover":937,"coverAlt":1740,"date":939,"description":1741,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1742,"navigation":26,"path":1745,"schemaOrg":1746,"seo":1749,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1750,"tags":1751,"__hash__":1757},"blog\u002Fblog\u002Fvue-beta-vapor-mode-revealed.en.md","Vue 3.6 Beta: The Vapor Mode Revolution and the New Reactivity Engine","Vue.js logo on a source code background","Explore the new features of Vue 3.6 Beta, including Vapor Mode and the alien-signals integration for more efficient reactivity.",{"updatedAt":942,"coverCaption":1743,"author":17,"keywords":1744},"Discover the innovations in Vue 3.6 Beta: Vapor Mode and a revamped reactivity engine","vue 3.6, vapor mode, alien-signals, reactivity, javascript, framework, frontend, beta","\u002Fblog\u002Fvue-beta-vapor-mode-revealed.en",[1747],{"headline":1739,"author":1748,"datePublished":949,"@type":32},{"name":17,"@type":31},{"title":1739,"description":1741},"blog\u002Fvue-beta-vapor-mode-revealed.en",[1752,1753,1754,1755,1756],{"tag":954,"color":955},{"tag":957,"color":958},{"tag":1079,"color":42},{"tag":1419,"color":962},{"tag":1081,"color":280},"Dg-ES6Mlw7OuQae9KUklZZ8DPH6hdjGUKpeIEIKJLCQ",{"id":935,"title":936,"cover":937,"coverAlt":938,"date":939,"description":940,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1759,"navigation":26,"path":945,"schemaOrg":1760,"seo":1763,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":951,"tags":1764,"__hash__":964},{"updatedAt":942,"coverCaption":943,"author":17,"keywords":944},[1761],{"headline":936,"author":1762,"datePublished":949,"@type":32},{"name":17,"@type":31},{"title":936,"description":940},[1765,1766,1767,1768,1769],{"tag":954,"color":955},{"tag":957,"color":958},{"tag":41,"color":42},{"tag":961,"color":962},{"tag":279,"color":280},{"id":1771,"title":1772,"cover":133,"coverAlt":1773,"date":135,"description":1774,"draft":11,"extension":12,"lab":1775,"locale":1058,"meta":1785,"navigation":26,"path":1788,"schemaOrg":1789,"seo":1792,"series":34,"seriesDescription":1522,"seriesOrder":162,"seriesTitle":1523,"slug":13,"stem":1793,"tags":1794,"__hash__":1799},"blog\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.en.md","Vue computed vs watch vs watchEffect: When to Use Each One","Vue reactivity concepts represented as connected data flows","Learn the practical difference between computed, watch, and watchEffect in Vue 3, with examples, mistakes to avoid, and a decision guide for real components.",{"title":1776,"goal":1777,"tasks":1778,"starterCode":1783,"solutionHint":1784},"Choose the right reactive tool","Practice using computed for derived state, watch for explicit side effects, and watchEffect for automatic dependency tracking.",[1779,1780,1781,1782],"Create a search input stored in a ref.","Use computed to normalize the query.","Use watch to trigger a fetch-like function only when the normalized query changes.","Use watchEffect to log every reactive value read inside the effect, then explain why it runs.","\u003Cscript setup>\nimport { computed, ref, watch, watchEffect } from 'vue'\n\nconst query = ref('')\nconst page = ref(1)\n\nconst normalizedQuery = computed(() => query.value.trim().toLowerCase())\n\nwatch(normalizedQuery, (value) => {\n  page.value = 1\n  console.log('Fetch results for:', value)\n})\n\nwatchEffect(() => {\n  console.log('Current search state:', normalizedQuery.value, page.value)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" placeholder=\"Search articles\">\n  \u003Cp>Normalized query: {{ normalizedQuery }}\u003C\u002Fp>\n  \u003Cp>Page: {{ page }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","The computed value derives data without causing side effects. The watch reacts to one explicit source. The watchEffect reruns whenever anything it reads changes.",{"updatedAt":148,"coverCaption":1786,"author":17,"keywords":1787},"Computed values, watchers, and effects in Vue 3 by TODOvue",[151,72,152,153,154,1712,25],"\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.en",[1790],{"headline":1772,"author":1791,"datePublished":160,"@type":32},{"name":17,"@type":31},{"title":1772,"description":1774},"blog\u002Fvue-computed-watch-watcheffect-guide.en",[1795,1796,1797,1798],{"tag":1079,"color":42},{"tag":1455,"color":57},{"tag":1317,"color":169},{"tag":1529,"color":48},"H9QahSCXH-yUngjIhlA9vCY6u1Y0V6K3QTOepsiD9FI",{"id":131,"title":132,"cover":133,"coverAlt":134,"date":135,"description":136,"draft":11,"extension":12,"lab":1801,"locale":14,"meta":1803,"navigation":26,"path":156,"schemaOrg":1805,"seo":1808,"series":34,"seriesDescription":35,"seriesOrder":162,"seriesTitle":37,"slug":13,"stem":163,"tags":1809,"__hash__":171},{"title":138,"goal":139,"tasks":1802,"starterCode":145,"solutionHint":146},[141,142,143,144],{"updatedAt":148,"coverCaption":149,"author":17,"keywords":1804},[151,72,152,153,154,155,25],[1806],{"headline":132,"author":1807,"datePublished":160,"@type":32},{"name":17,"@type":31},{"title":132,"description":136},[1810,1811,1812,1813],{"tag":41,"color":42},{"tag":56,"color":57},{"tag":168,"color":169},{"tag":47,"color":48},{"id":1815,"title":1816,"cover":818,"coverAlt":1816,"date":819,"description":1817,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1818,"navigation":26,"path":1821,"schemaOrg":1822,"seo":1825,"series":550,"seriesDescription":1068,"seriesOrder":115,"seriesTitle":1069,"slug":13,"stem":1826,"tags":1827,"__hash__":1834},"blog\u002Fblog\u002Fvue-directives-overview.en.md","Vue Directives: An Overview","Explore Vue.js’ essential directives, their syntax, and common use cases.",{"updatedAt":657,"readingTime":82,"coverCaption":1819,"author":17,"keywords":1820},"Cover image representing directives in Vue.js.",[151,1073,1439,1455],"\u002Fblog\u002Fvue-directives-overview.en",[1823],{"headline":1816,"author":1824,"datePublished":829,"@type":32},{"name":17,"@type":31},{"title":1816,"description":1817},"blog\u002Fvue-directives-overview.en",[1828,1829,1830,1831,1832,1833],{"tag":1073,"color":558},{"tag":590,"color":591},{"tag":1217,"color":811},{"tag":1183,"color":42},{"tag":1079,"color":42},{"tag":1117,"color":209},"SErVeBGYMzT6QY0BoDyse1mTac-I06e1Wx4_y-qB4pQ",{"id":816,"title":817,"cover":818,"coverAlt":817,"date":819,"description":820,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1836,"navigation":26,"path":825,"schemaOrg":1838,"seo":1841,"series":550,"seriesDescription":551,"seriesOrder":115,"seriesTitle":553,"slug":13,"stem":831,"tags":1842,"__hash__":839},{"updatedAt":657,"readingTime":82,"coverCaption":822,"author":17,"keywords":1837},[151,557,824,56],[1839],{"headline":817,"author":1840,"datePublished":829,"@type":32},{"name":17,"@type":31},{"title":817,"description":820},[1843,1844,1845,1846,1847,1848],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":810,"color":811},{"tag":780,"color":42},{"tag":41,"color":42},{"tag":208,"color":209},{"id":1850,"title":1851,"cover":458,"coverAlt":1852,"date":460,"description":1853,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1854,"navigation":26,"path":1857,"schemaOrg":1858,"seo":1861,"series":266,"seriesDescription":1862,"seriesOrder":36,"seriesTitle":1863,"slug":13,"stem":1864,"tags":1865,"__hash__":1871},"blog\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.en.md","Vue Lifecycle: creation phase (beforeCreate, created, setup)","Illustration of a Vue component lifecycle highlighting the creation phase with beforeCreate, created, and setup","What really happens during a Vue component's creation phase and how to choose between beforeCreate, created, and setup.",{"updatedAt":463,"coverCaption":1855,"author":17,"keywords":1856},"This image shows a Vue component lifecycle, focusing on the creation phase where beforeCreate, created, and setup run.",[151,466,467,468,25],"\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.en",[1859],{"headline":1851,"author":1860,"datePublished":463,"@type":32},{"name":17,"@type":31},{"title":1851,"description":1853},"A practical series to master every Vue lifecycle hook, from basics to advanced use cases.","Vue Lifecycle Hooks","blog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.en",[1866,1868,1869,1870],{"tag":1867,"color":274},"Lifecycle",{"tag":1355,"color":119},{"tag":1079,"color":42},{"tag":1117,"color":209},"dUV2wP3u1LZ381SU2p4pQSgkCSheWpFn-xFGjg7O4dw",{"id":456,"title":457,"cover":458,"coverAlt":459,"date":460,"description":461,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1873,"navigation":26,"path":469,"schemaOrg":1875,"seo":1878,"series":266,"seriesDescription":267,"seriesOrder":36,"seriesTitle":269,"slug":13,"stem":474,"tags":1879,"__hash__":480},{"updatedAt":463,"coverCaption":464,"author":17,"keywords":1874},[151,466,467,468,25],[1876],{"headline":457,"author":1877,"datePublished":463,"@type":32},{"name":17,"@type":31},{"title":457,"description":461},[1880,1881,1882,1883],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":208,"color":209},{"id":1885,"title":1886,"cover":317,"coverAlt":1887,"date":319,"description":1888,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1889,"navigation":26,"path":1893,"schemaOrg":1894,"seo":1897,"series":266,"seriesDescription":1862,"seriesOrder":334,"seriesTitle":1863,"slug":13,"stem":1898,"tags":1899,"__hash__":1905},"blog\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.en.md","Vue Lifecycle: error handling with errorCaptured","Illustration of a Vue component with a protective shield, representing error handling with errorCaptured.","How to use errorCaptured and onErrorCaptured to isolate failures in child components, show fallback states, and log errors without breaking the entire interface.",{"updatedAt":322,"coverCaption":1890,"author":17,"keywords":1891},"With errorCaptured, you can protect specific parts of your UI without compromising the whole experience.",[151,325,326,1892,328],"error handling","\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.en",[1895],{"headline":1886,"author":1896,"datePublished":322,"@type":32},{"name":17,"@type":31},{"title":1886,"description":1888},"blog\u002Fvue-lifecycle-error-handling-errorcaptured.en",[1900,1901,1903,1904],{"tag":1867,"color":274},{"tag":1902,"color":340},"Error Handling",{"tag":1355,"color":119},{"tag":1081,"color":280},"D6O6sgQhuIfqGwKCwGqfJDP30DbfIjRqTrH7lgNyLAc",{"id":315,"title":316,"cover":317,"coverAlt":318,"date":319,"description":320,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1907,"navigation":26,"path":329,"schemaOrg":1909,"seo":1912,"series":266,"seriesDescription":267,"seriesOrder":334,"seriesTitle":269,"slug":13,"stem":335,"tags":1913,"__hash__":343},{"updatedAt":322,"coverCaption":323,"author":17,"keywords":1908},[151,325,326,327,328],[1910],{"headline":316,"author":1911,"datePublished":322,"@type":32},{"name":17,"@type":31},{"title":316,"description":320},[1914,1915,1916,1917],{"tag":273,"color":274},{"tag":339,"color":340},{"tag":103,"color":119},{"tag":279,"color":280},{"id":1919,"title":1920,"cover":484,"coverAlt":1920,"date":485,"description":1921,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1922,"navigation":26,"path":1926,"schemaOrg":1927,"seo":1930,"series":266,"seriesDescription":1862,"seriesOrder":115,"seriesTitle":1863,"slug":13,"stem":1931,"tags":1932,"__hash__":1937},"blog\u002Fblog\u002Fvue-lifecycle-hooks-overview.en.md","Vue Lifecycle Hooks: An Overview","A clear map of all Vue 3 lifecycle hooks to understand when to use each one.",{"updatedAt":488,"readingTime":255,"coverCaption":1923,"author":17,"keywords":1924},"Overview of lifecycle hooks in Vue 3.",[151,1925,25,492,493],"Lifecycle hooks","\u002Fblog\u002Fvue-lifecycle-hooks-overview.en",[1928],{"headline":1920,"author":1929,"datePublished":488,"@type":32},{"name":17,"@type":31},{"title":1920,"description":1921},"blog\u002Fvue-lifecycle-hooks-overview.en",[1933,1934,1935,1936],{"tag":1867,"color":274},{"tag":1355,"color":119},{"tag":1079,"color":42},{"tag":1117,"color":209},"eKL7WbNdfy7YCgu4kuXQo2-usXKNEx-NzC0RBSf6EQM",{"id":482,"title":483,"cover":484,"coverAlt":483,"date":485,"description":486,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1939,"navigation":26,"path":494,"schemaOrg":1941,"seo":1944,"series":266,"seriesDescription":267,"seriesOrder":115,"seriesTitle":269,"slug":13,"stem":499,"tags":1945,"__hash__":505},{"updatedAt":488,"readingTime":255,"coverCaption":489,"author":17,"keywords":1940},[151,491,25,492,493],[1942],{"headline":483,"author":1943,"datePublished":488,"@type":32},{"name":17,"@type":31},{"title":483,"description":486},[1946,1947,1948,1949],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":208,"color":209},{"id":1951,"title":1952,"cover":347,"coverAlt":1953,"date":349,"description":1954,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1955,"navigation":26,"path":1959,"schemaOrg":1960,"seo":1963,"series":266,"seriesDescription":1862,"seriesOrder":82,"seriesTitle":1863,"slug":13,"stem":1964,"tags":1965,"__hash__":1970},"blog\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.en.md","Vue Lifecycle: cached components with \u003CKeepAlive> (activated, deactivated)","Illustration of cached Vue components with KeepAlive using activated and deactivated","How activated and deactivated work in components cached with \u003CKeepAlive>, when to use them, and how to avoid stale data, running timers, and misplaced lifecycle logic.",{"updatedAt":352,"coverCaption":1956,"author":17,"keywords":1957},"KeepAlive lets Vue deactivate and reactivate components without destroying their local state",[151,355,356,357,1958],"component cache","\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.en",[1961],{"headline":1952,"author":1962,"datePublished":352,"@type":32},{"name":17,"@type":31},{"title":1952,"description":1954},"blog\u002Fvue-lifecycle-keepalive-activated-deactivated.en",[1966,1967,1968,1969],{"tag":1867,"color":274},{"tag":355,"color":368},{"tag":1355,"color":119},{"tag":1081,"color":280},"LYoP5k_2lVZvskyBmowX2_EwO3_O4yaxCZC0wsXlxP0",{"id":345,"title":346,"cover":347,"coverAlt":348,"date":349,"description":350,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1972,"navigation":26,"path":359,"schemaOrg":1974,"seo":1977,"series":266,"seriesDescription":267,"seriesOrder":82,"seriesTitle":269,"slug":13,"stem":364,"tags":1978,"__hash__":371},{"updatedAt":352,"coverCaption":353,"author":17,"keywords":1973},[151,355,356,357,358],[1975],{"headline":346,"author":1976,"datePublished":352,"@type":32},{"name":17,"@type":31},{"title":346,"description":350},[1979,1980,1981,1982],{"tag":273,"color":274},{"tag":355,"color":368},{"tag":103,"color":119},{"tag":279,"color":280},{"id":1984,"title":1985,"cover":431,"coverAlt":1986,"date":433,"description":1987,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":1988,"navigation":26,"path":1991,"schemaOrg":1992,"seo":1995,"series":266,"seriesDescription":1862,"seriesOrder":162,"seriesTitle":1863,"slug":13,"stem":1996,"tags":1997,"__hash__":2002},"blog\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.en.md","Vue Lifecycle: mounting phase (beforeMount, mounted)","Illustration of a Vue component lifecycle focused on the DOM mounting phase","What happens right before and right after Vue inserts a component into the DOM, and how to use beforeMount and mounted without turning them into a dumping ground.",{"updatedAt":436,"coverCaption":1989,"author":17,"keywords":1990},"The mounting phase is the moment when Vue creates and inserts the component DOM into the page.",[151,439,440,441,442],"\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.en",[1993],{"headline":1985,"author":1994,"datePublished":436,"@type":32},{"name":17,"@type":31},{"title":1985,"description":1987},"blog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.en",[1998,1999,2000,2001],{"tag":1867,"color":274},{"tag":1355,"color":119},{"tag":1149,"color":310},{"tag":1117,"color":209},"5uh-6RgLyum4IuL1Eyjp9GUu1sSmDc0l7P2QHxsueAc",{"id":429,"title":430,"cover":431,"coverAlt":432,"date":433,"description":434,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2004,"navigation":26,"path":443,"schemaOrg":2006,"seo":2009,"series":266,"seriesDescription":267,"seriesOrder":162,"seriesTitle":269,"slug":13,"stem":448,"tags":2010,"__hash__":454},{"updatedAt":436,"coverCaption":437,"author":17,"keywords":2005},[151,439,440,441,442],[2007],{"headline":430,"author":2008,"datePublished":436,"@type":32},{"name":17,"@type":31},{"title":430,"description":434},[2011,2012,2013,2014],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":309,"color":310},{"tag":208,"color":209},{"id":2016,"title":2017,"cover":285,"coverAlt":2018,"date":287,"description":2019,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":2020,"navigation":26,"path":2023,"schemaOrg":2024,"seo":2027,"series":266,"seriesDescription":1862,"seriesOrder":255,"seriesTitle":1863,"slug":13,"stem":2028,"tags":2029,"__hash__":2036},"blog\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.en.md","Vue Lifecycle: render debugging (renderTracked, renderTriggered)","Illustration of render debugging in Vue with renderTracked and renderTriggered","How to use renderTracked, renderTriggered, onRenderTracked, and onRenderTriggered to understand which dependencies enter a render and which changes are forcing new updates.",{"updatedAt":290,"coverCaption":2021,"author":17,"keywords":2022},"renderTracked and renderTriggered help you see which dependency enters render and which one triggers it again.",[151,293,294,295,296],"\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.en",[2025],{"headline":2017,"author":2026,"datePublished":290,"@type":32},{"name":17,"@type":31},{"title":2017,"description":2019},"blog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.en",[2030,2031,2033,2034,2035],{"tag":1867,"color":274},{"tag":2032,"color":307},"Debugging",{"tag":1149,"color":310},{"tag":1079,"color":42},{"tag":1081,"color":280},"xPMZSwH6-42TJ7SSTzYhMU39QuSJoq6S7WTM5ZO8tn8",{"id":283,"title":284,"cover":285,"coverAlt":286,"date":287,"description":288,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2038,"navigation":26,"path":297,"schemaOrg":2040,"seo":2043,"series":266,"seriesDescription":267,"seriesOrder":255,"seriesTitle":269,"slug":13,"stem":302,"tags":2044,"__hash__":313},{"updatedAt":290,"coverCaption":291,"author":17,"keywords":2039},[151,293,294,295,296],[2041],{"headline":284,"author":2042,"datePublished":290,"@type":32},{"name":17,"@type":31},{"title":284,"description":288},[2045,2046,2047,2048,2049],{"tag":273,"color":274},{"tag":306,"color":307},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":279,"color":280},{"id":2051,"title":2052,"cover":249,"coverAlt":2053,"date":251,"description":2054,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":2055,"navigation":26,"path":2059,"schemaOrg":2060,"seo":2063,"series":266,"seriesDescription":1862,"seriesOrder":268,"seriesTitle":1863,"slug":13,"stem":2064,"tags":2065,"__hash__":2071},"blog\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.en.md","Vue Lifecycle: server-side rendering with serverPrefetch","Illustration of a server delivering HTML with resolved data while a client hydrates without needing an extra fetch.","How to use serverPrefetch and onServerPrefetch to load data before SSR rendering, avoid incomplete HTML, and coordinate the server's first render with client hydration.",{"updatedAt":2056,"readingTime":255,"coverCaption":2057,"author":17,"keywords":2058},"2026-03-20T19:15:00-05:00","With `serverPrefetch`, the server can deliver complete HTML, improving both experience and SEO from the very first render.",[151,258,259,53,578],"\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.en",[2061],{"headline":2052,"author":2062,"datePublished":2056,"@type":32},{"name":17,"@type":31},{"title":2052,"description":2054},"blog\u002Fvue-lifecycle-ssr-serverprefetch.en",[2066,2067,2068,2069,2070],{"tag":1867,"color":274},{"tag":53,"color":54},{"tag":1077,"color":88},{"tag":1355,"color":119},{"tag":1081,"color":280},"s1UahE15BFUQsBRmMaDyakFgtwEo9EKWl6zD4PqpGlM",{"id":247,"title":248,"cover":249,"coverAlt":250,"date":251,"description":252,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2073,"navigation":26,"path":261,"schemaOrg":2075,"seo":2078,"series":266,"seriesDescription":267,"seriesOrder":268,"seriesTitle":269,"slug":13,"stem":270,"tags":2079,"__hash__":281},{"updatedAt":254,"readingTime":255,"coverCaption":256,"author":17,"keywords":2074},[151,258,259,53,260],[2076],{"headline":248,"author":2077,"datePublished":254,"@type":32},{"name":17,"@type":31},{"title":248,"description":252},[2080,2081,2082,2083,2084],{"tag":273,"color":274},{"tag":53,"color":54},{"tag":73,"color":88},{"tag":103,"color":119},{"tag":279,"color":280},{"id":2086,"title":2087,"cover":375,"coverAlt":2088,"date":377,"description":2089,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":2090,"navigation":26,"path":2093,"schemaOrg":2094,"seo":2097,"series":266,"seriesDescription":1862,"seriesOrder":392,"seriesTitle":1863,"slug":13,"stem":2098,"tags":2099,"__hash__":2103},"blog\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.en.md","Vue Lifecycle: unmounting phase (beforeUnmount, unmounted)","Illustration of the unmounting phase of the Vue lifecycle with beforeUnmount and unmounted","What happens when a component leaves the screen and how to use beforeUnmount and unmounted to clean up listeners, timers, and side effects without leaks or strange behavior.",{"updatedAt":380,"coverCaption":2091,"author":17,"keywords":2092},"The unmounting phase happens when Vue removes a component from the active tree",[151,383,384,385,386],"\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.en",[2095],{"headline":2087,"author":2096,"datePublished":380,"@type":32},{"name":17,"@type":31},{"title":2087,"description":2089},"blog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.en",[2100,2101,2102],{"tag":1867,"color":274},{"tag":1355,"color":119},{"tag":1117,"color":209},"2LAxkkS33i-vGNnTWe2sQaba4DuOd0cNKaRxDgUi_ls",{"id":373,"title":374,"cover":375,"coverAlt":376,"date":377,"description":378,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2105,"navigation":26,"path":387,"schemaOrg":2107,"seo":2110,"series":266,"seriesDescription":267,"seriesOrder":392,"seriesTitle":269,"slug":13,"stem":393,"tags":2111,"__hash__":398},{"updatedAt":380,"coverCaption":381,"author":17,"keywords":2106},[151,383,384,385,386],[2108],{"headline":374,"author":2109,"datePublished":380,"@type":32},{"name":17,"@type":31},{"title":374,"description":378},[2112,2113,2114],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":208,"color":209},{"id":2116,"title":2117,"cover":402,"coverAlt":2118,"date":404,"description":2119,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":2120,"navigation":26,"path":2123,"schemaOrg":2124,"seo":2127,"series":266,"seriesDescription":1862,"seriesOrder":419,"seriesTitle":1863,"slug":13,"stem":2128,"tags":2129,"__hash__":2135},"blog\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.en.md","Vue Lifecycle: update phase (beforeUpdate, updated)","Illustration of the Vue lifecycle update phase with beforeUpdate and updated","What happens when Vue re-renders a component and how to use beforeUpdate and updated without treating them as stand-ins for watch or computed.",{"updatedAt":407,"coverCaption":2121,"author":17,"keywords":2122},"The update phase happens when a reactive change forces Vue to render the component again.",[151,410,411,412,1172],"\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.en",[2125],{"headline":2117,"author":2126,"datePublished":407,"@type":32},{"name":17,"@type":31},{"title":2117,"description":2119},"blog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.en",[2130,2131,2132,2133,2134],{"tag":1867,"color":274},{"tag":1355,"color":119},{"tag":1149,"color":310},{"tag":1079,"color":42},{"tag":1117,"color":209},"ExkRJ70KcrcvSaTYorHh4tOF8RHMUZ3btA0BS7quCk4",{"id":400,"title":401,"cover":402,"coverAlt":403,"date":404,"description":405,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2137,"navigation":26,"path":414,"schemaOrg":2139,"seo":2142,"series":266,"seriesDescription":267,"seriesOrder":419,"seriesTitle":269,"slug":13,"stem":420,"tags":2143,"__hash__":427},{"updatedAt":407,"coverCaption":408,"author":17,"keywords":2138},[151,410,411,412,413],[2140],{"headline":401,"author":2141,"datePublished":407,"@type":32},{"name":17,"@type":31},{"title":401,"description":405},[2144,2145,2146,2147,2148],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":208,"color":209},{"id":2150,"title":2151,"cover":871,"coverAlt":2151,"date":872,"description":2152,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":2153,"navigation":26,"path":2156,"schemaOrg":2157,"seo":2160,"series":80,"seriesDescription":1445,"seriesOrder":419,"seriesTitle":1446,"slug":13,"stem":2161,"tags":2162,"__hash__":2170},"blog\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.en.md","Provide and Inject in Vue 3: The Definitive Guide to Eliminating Prop Drilling","Learn how to use provide and inject in Vue.js to eliminate Prop Drilling, manage reactivity safely with readonly, and improve your component architecture.",{"updatedAt":67,"coverCaption":2154,"author":17,"keywords":2155},"Provide and Inject in Vue 3 by TODOvue",[151,877,878,879,25,1712],"\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.en",[2158],{"headline":2151,"author":2159,"datePublished":884,"@type":32},{"name":17,"@type":31},{"title":2151,"description":2152},"blog\u002Fvue-provide-inject-avoid-prop-drilling.en",[2163,2165,2166,2167,2168,2169],{"tag":2164,"color":890},"Dependency Injection",{"tag":1479,"color":45},{"tag":1077,"color":88},{"tag":1438,"color":862},{"tag":1355,"color":119},{"tag":1455,"color":57},"intwlMa6NNQsYsAQ9hNg5ddcLIlsEx1CgezWeET3XC8",{"id":869,"title":870,"cover":871,"coverAlt":870,"date":872,"description":873,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2172,"navigation":26,"path":880,"schemaOrg":2174,"seo":2177,"series":80,"seriesDescription":81,"seriesOrder":419,"seriesTitle":83,"slug":13,"stem":886,"tags":2178,"__hash__":896},{"updatedAt":67,"coverCaption":875,"author":17,"keywords":2173},[151,877,878,879,25,155],[2175],{"headline":870,"author":2176,"datePublished":884,"@type":32},{"name":17,"@type":31},{"title":870,"description":873},[2179,2180,2181,2182,2183,2184],{"tag":889,"color":890},{"tag":44,"color":45},{"tag":73,"color":88},{"tag":851,"color":862},{"tag":103,"color":119},{"tag":56,"color":57},{"id":2186,"title":2187,"cover":900,"coverAlt":2188,"date":902,"description":2189,"draft":11,"extension":12,"lab":2190,"locale":1058,"meta":2200,"navigation":26,"path":2203,"schemaOrg":2204,"seo":2207,"series":34,"seriesDescription":1522,"seriesOrder":115,"seriesTitle":1523,"slug":13,"stem":2208,"tags":2209,"__hash__":2213},"blog\u002Fblog\u002Fvue-reactivity-explained.en.md","What Is Reactivity? The Magic Behind Vue.js Explained Clearly","Illustration of a magical Vue.js coding laboratory","Explore Vue.js’s reactivity system, from simple analogies to its technical implementation with Proxies, and learn to optimize your applications.",{"title":2191,"goal":2192,"tasks":2193,"starterCode":2198,"solutionHint":2199},"Build a tiny reactive counter","Practice the difference between state, derived state, and effects by creating a small counter with Vue reactivity primitives.",[2194,2195,2196,2197],"Create a counter with ref() and render its current value.","Add a computed value that doubles the counter.","Use watch() to log when the counter reaches 5.","Explain in one sentence which reads are tracked and which writes trigger updates.","\u003Cscript setup>\nimport { computed, ref, watch } from 'vue'\n\nconst count = ref(0)\nconst doubled = computed(() => count.value * 2)\n\nwatch(count, (value) => {\n  if (value === 5) {\n    console.log('The counter reached 5')\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Count: {{ count }}\u003C\u002Fbutton>\n  \u003Cp>Doubled: {{ doubled }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","The template and computed getter read count, so Vue tracks those dependencies. Clicking the button writes to count, so Vue triggers the dependent updates.",{"updatedAt":148,"coverCaption":2201,"author":17,"keywords":2202},"Illustration of a magical Vue.js coding laboratory by TODOvue",[151,1079,917,25,918,919],"\u002Fblog\u002Fvue-reactivity-explained.en",[2205],{"headline":2187,"author":2206,"datePublished":924,"@type":32},{"name":17,"@type":31},{"title":2187,"description":2189},"blog\u002Fvue-reactivity-explained.en",[2210,2211,2212],{"tag":1079,"color":42},{"tag":1117,"color":209},{"tag":1417,"color":932},"VXlULj33Dx85m05PbC4cxM_bA1zDucuDdm31A9fDpf0",{"id":898,"title":899,"cover":900,"coverAlt":901,"date":902,"description":903,"draft":11,"extension":12,"lab":2215,"locale":14,"meta":2217,"navigation":26,"path":920,"schemaOrg":2219,"seo":2222,"series":34,"seriesDescription":35,"seriesOrder":115,"seriesTitle":37,"slug":13,"stem":926,"tags":2223,"__hash__":933},{"title":905,"goal":906,"tasks":2216,"starterCode":912,"solutionHint":913},[908,909,910,911],{"updatedAt":148,"coverCaption":915,"author":17,"keywords":2218},[151,41,917,25,918,919],[2220],{"headline":899,"author":2221,"datePublished":924,"@type":32},{"name":17,"@type":31},{"title":899,"description":903},[2224,2225,2226],{"tag":41,"color":42},{"tag":208,"color":209},{"tag":931,"color":932},{"id":2228,"title":2229,"cover":1032,"coverAlt":2230,"date":1034,"description":2231,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":2232,"navigation":26,"path":2234,"schemaOrg":2235,"seo":2238,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":2239,"tags":2240,"__hash__":2244},"blog\u002Fblog\u002Fwelcome-to-todovue.en.md","TODOvue: A space dedicated to the Vue.js ecosystem","TODOvue logo with source code background","Welcome to TODOvue. A technical blog designed by and for developers, where we deep-dive into Vue 3, Nuxt, and modern component architecture.",{"updatedAt":942,"coverCaption":2233},"Exploring the Vue.js universe from end to end","\u002Fblog\u002Fwelcome-to-todovue.en",[2236],{"headline":2229,"author":2237,"datePublished":1042,"@type":32},{"name":17,"@type":31},{"title":2229,"description":2231},"blog\u002Fwelcome-to-todovue.en",[2241,2242,2243],{"tag":17,"color":955},{"tag":1048,"color":1049},{"tag":1419,"color":962},"B8SdY6ptY_TGW3ZjHN6IVtVoYvhSxQU-ew7NnmQ0TnI",{"id":1030,"title":1031,"cover":1032,"coverAlt":1033,"date":1034,"description":1035,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2246,"navigation":26,"path":1038,"schemaOrg":2247,"seo":2250,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1044,"tags":2251,"__hash__":1051},{"updatedAt":942,"coverCaption":1037},[2248],{"headline":1031,"author":2249,"datePublished":1042,"@type":32},{"name":17,"@type":31},{"title":1031,"description":1035},[2252,2253,2254],{"tag":17,"color":955},{"tag":1048,"color":1049},{"tag":961,"color":962},{"id":2256,"title":2257,"cover":2258,"coverAlt":1740,"date":1012,"description":2259,"draft":11,"extension":12,"lab":13,"locale":1058,"meta":2260,"navigation":26,"path":2263,"schemaOrg":2264,"seo":2267,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":2268,"tags":2269,"__hash__":2273},"blog\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.en.md","What is Vue.js and Why Should You Use It?","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766101056\u002FWhat_is_Vuejs_and_Why_Should_You_Use_It_mk5pmg.png","Discover Vue.js, a progressive JavaScript framework, and learn why it's an excellent choice for developing modern and reactive web applications.",{"updatedAt":942,"coverCaption":2261,"author":17,"keywords":2262},"Exploring Vue.js: The progressive framework for the modern web","vue.js, javascript, framework, frontend, spa, reactivity, composition api, vue 3","\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.en",[2265],{"headline":2257,"author":2266,"datePublished":1021,"@type":32},{"name":17,"@type":31},{"title":2257,"description":2259},"blog\u002Fwhat-is-vue-js-and-why-you-should-use-it.en",[2270,2271,2272],{"tag":1419,"color":962},{"tag":1117,"color":209},{"tag":1417,"color":932},"ccmKez_9DmTyQhWGubjPap61sk5CUTOpTGPi2oGnPKU",{"id":1009,"title":1010,"cover":1011,"coverAlt":938,"date":1012,"description":1013,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2275,"navigation":26,"path":1017,"schemaOrg":2276,"seo":2279,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1023,"tags":2280,"__hash__":1028},{"updatedAt":942,"coverCaption":1015,"author":17,"keywords":1016},[2277],{"headline":1010,"author":2278,"datePublished":1021,"@type":32},{"name":17,"@type":31},{"title":1010,"description":1013},[2281,2282,2283],{"tag":961,"color":962},{"tag":208,"color":209},{"tag":931,"color":932},1785203034458]