{"id":4083,"date":"2019-08-19T08:10:15","date_gmt":"2019-08-19T12:10:15","guid":{"rendered":"https:\/\/skatox.com\/blog\/?p=4083"},"modified":"2023-02-27T16:47:22","modified_gmt":"2023-02-27T21:47:22","slug":"crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex","status":"publish","type":"post","link":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/","title":{"rendered":"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex"},"content":{"rendered":"\n

Si est\u00e1n utilizando Vuetify y desean un componente para mostrar notificaciones en vue.js. Ver\u00e1n que existe una llamado Snackbar<\/a> que permite implementarlos. El problema de este componente es que requiere definirse en cada vista que hagamos en Vue (por la naturaleza de esta librer\u00eda) y debemos crear un m\u00e9todo para mostrarlo. <\/p>\n\n\n\n

Esto es un problema en aplicaciones grandes, porque tendr\u00edamos c\u00f3digo repetido y descentralizado. Gracias a Vuex<\/a> podemos evitar este tipo de cosas. Por lo que te explicar\u00e9 como crear notificaciones con vue.js con Vuex.<\/p>\n\n\n\n

Definir opciones del Snackbar en Vuex<\/h3>\n\n\n\n

Primero vamos a definir en vuestro archivo store.js<\/em> (o donde instancias Vuex.Store) un estado para tener la configuraci\u00f3n por defecto del Snackbar. El estado permite almacenar los par\u00e1metros del Snackbar de forma global y poder ser accedida desde cualquier vista. Para ello en la secci\u00f3n de state<\/em> agrega las siguientes opciones:<\/p>\n\n\n\n

export default new Vuex.Store({\n  state: {\n    snackbar: {\n      visible: false,\n      color: \"success\",\n      text: null,\n      timeout: 10000,\n      multiline: false\n    },\n    ...\n    ...\n  },<\/code><\/pre>\n\n\n\n
Luego en el mismo archivo, definimos una mutaci\u00f3n. En Vuex las mutaciones son los m\u00e9todos que nos permiten modificar un estado. Esta mutaci\u00f3n la usaremos a lo largo de la aplicaci\u00f3n para lanzar la notificaci\u00f3n desde cualquier lado. <\/p>\n\n\n\n
El primer par\u00e1metro siempre es el estado actual y el segundo el payload. \u00c9ste \u00faltimo es enviado cada vez que llamamos a la notificaci\u00f3n con el fin de definir la apariencia. Por ejemplo, si ocurre un error podemos enviar los par\u00e1metros de que el tipo de notificaci\u00f3n sea error y aparezca de color rojo. <\/p>\n\n\n\n
En este ejemplo, agregu\u00e9 opciones para decidir si mostrarlo en multi-l\u00ednea , elegir color, tiempo de duraci\u00f3n, etc. As\u00ed que en la secci\u00f3n de mutaciones del store.js<\/em> agrega:<\/p>\n\n\n\n
\nmutations: {\n    alert(state, payload) {\n      state.snackbar.text = payload.text;\n      state.snackbar.multiline = payload.text.length &gt; 50;\n\n      \/\/ Si es mas de 50 caracteres definirlo como multilinea\n      if (payload.multiline) {\n        state.snackbar.multiline = payload.multiline;\n      }\n    \n      \/\/ Color para mensajes de error o \u00e9xito\n      if (payload.color) {\n        state.snackbar.color = payload.color;\n      }\n\n     \/\/ Tiempo de duraci\u00f3n\n      if (payload.timeout) {\n        state.snackbar.timeout = payload.timeout;\n      }\n      state.snackbar.visible = true;\n   },\n   closeAlert(state) {\n      state.snackbar.visible = false;\n      state.snackbar.multiline = false;\n      state.snackbar.text = null;\n    },\n}<\/code><\/pre>\n\n\n\n
Tambi\u00e9n en esta secci\u00f3n de mutaciones agregu\u00e9 una mutaci\u00f3n llamada closeAlert(state)<\/em> para poder alterar la configuraci\u00f3n del snackbar y hacer que se oculte. <\/p>\n\n\n\n
Crear el componente de la notificaci\u00f3n<\/h3>\n\n\n\n
Lo mas f\u00e1cil es crear un componente para la notificaciones. Pues as\u00ed no mezclas c\u00f3digo y lo puedes ubicar en un s\u00f3lo lugar para que se lance.<\/p>\n\n\n\n
Este componente consta simplemente de un Snackbar<\/em> cuyas opciones son extra\u00eddas de un dato llamado snackbar<\/strong><\/em>. Este dato es extra\u00eddo del estado de Vuex definido previamente a trav\u00e9s de una variable computada.<\/p>\n\n\n\n
Aqu\u00ed puedes ver el ejemplo de mi componente:<\/p>\n\n\n\n
<template>\n  <v -snackbar=\"\" top=\"\" v-model=\"snackbar.visible\" :timeout=\"snackbar.timeout\" :multi-line=\"snackbar.multiline === true\" :color=\"snackbar.color\">\n    {{ snackbar.text }}\n    <\/v><v -btn=\"\" text=\"\" dark=\"\" @click=\"closeAlert\">Close<\/v>\n  \n<\/template>\n<script>\nimport { mapMutations } from \"vuex\";\nexport default {\n  computed: {\n    snackbar() {\n      return this.$store.state.snackbar;\n    }\n  },\n  methods: {\n    ...mapMutations([\"closeAlert\"])\n  }\n};\n<\/script><\/code><\/pre>\n\n\n\n
Ahora, para implementar el cierre, importo las mutaciones de Vuex para tener acceso a la funci\u00f3n closeAlert<\/strong><\/em> que definimos previamente. De esta forma al llamar a closeAlert (una mutaci\u00f3n) modificar\u00e1 el estado de la variable visible<\/em>, haciendo que se oculte.<\/p>\n\n\n\n
Este component lo puedes colocar antes del cierre de tu v-app para que se pued mostrar en todas las p\u00e1ginas.<\/p>\n\n\n\n
Crear las notificaciones en Vue.Js<\/h3>\n\n\n\n
Cada vez que desees mostrar una notificaciones en vuej.js, solo debes realizar un commit<\/em>. El primer par\u00e1metro es el nombre de la mutaci\u00f3n, en este caso alert<\/em> y las opciones del snackbar<\/em> la pasas como segundo par\u00e1metro.<\/p>\n\n\n\n
Un ejemplo para una notificaci\u00f3n de error ser\u00eda algo como:<\/p>\n\n\n\n
this.$store.commit(\"alert\", {\n  color: \"error\",\n  text:\n    \"Could not load purchase order info. Status Code: \" +\n    response.status\n});<\/code><\/pre>\n\n\n\n
\u00a1Listo! Ahora podr\u00e1s mostrar notificaciones con vue.js de forma centralizada a lo largo de tu aplicaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"
Si est\u00e1n utilizando Vuetify y desean un componente para mostrar notificaciones en vue.js. Ver\u00e1n que existe una llamado Snackbar que permite implementarlos. El problema de…<\/p>\n
Seguir leyendoCrear notificaciones en Vue.js con Vuetify 2.0 y Vuex<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[549,716,582],"tags":[1179,1180,1175,1178,1177],"class_list":["post-4083","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","category-todo-lo-relacionado-al-desarrollo-de-software","category-planetas-linux","tag-notificaciones","tag-snackbars","tag-vuejs","tag-vuetify","tag-vuex","entry"],"yoast_head":"\nCrear notificaciones en Vue.js con Vuetify 2.0 y Vuex - El blog de Skatox<\/title>\n<meta name=\"description\" content=\"Conoce como crear notificaciones en Vue.js utilizando el componente Snackbar y usando Vuex para centralizar el llamado a las notificaciones\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex - El blog de Skatox\" \/>\n<meta property=\"og:url\" content=\"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/\" \/>\n<meta property=\"og:site_name\" content=\"El blog de Skatox\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ElWeblogdeSkatox\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-19T12:10:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T21:47:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/skatox.com\/blog\/images\/2015\/12\/skatux.png\" \/>\n\t<meta property=\"og:image:width\" content=\"625\" \/>\n\t<meta property=\"og:image:height\" content=\"603\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Miguel Useche\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@skatox\" \/>\n<meta name=\"twitter:site\" content=\"@skatox\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Miguel Useche\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/\"},\"author\":{\"name\":\"Miguel Useche\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/person\\\/e081bf33c5b0f1b0514e253cb578e1ba\"},\"headline\":\"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex\",\"datePublished\":\"2019-08-19T12:10:15+00:00\",\"dateModified\":\"2023-02-27T21:47:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/\"},\"wordCount\":545,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\"},\"keywords\":[\"notificaciones\",\"snackbars\",\"vuejs\",\"vuetify\",\"vuex\"],\"articleSection\":[\"Desarrollo web\",\"Desarrollo y Programaci\u00f3n\",\"Planetas\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/\",\"name\":\"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex - El blog de Skatox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#website\"},\"datePublished\":\"2019-08-19T12:10:15+00:00\",\"dateModified\":\"2023-02-27T21:47:22+00:00\",\"description\":\"Conoce como crear notificaciones en Vue.js utilizando el componente Snackbar y usando Vuex para centralizar el llamado a las notificaciones\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/2019\\\/08\\\/19\\\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\",\"name\":\"El blog de Skatox\",\"description\":\"Compartiendo mis opiniones inform\u00e1ticas mas all\u00e1 de los 280 caracteres\",\"publisher\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/skatox.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#organization\",\"name\":\"El blog de Skatox\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2022\\\/03\\\/tux.png\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/images\\\/2022\\\/03\\\/tux.png\",\"width\":218,\"height\":218,\"caption\":\"El blog de Skatox\"},\"image\":{\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ElWeblogdeSkatox\\\/\",\"https:\\\/\\\/x.com\\\/skatox\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/skatox\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/MiguelAngelUsecheCastro\",\"https:\\\/\\\/x.com\\\/skatox\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/#\\\/schema\\\/person\\\/e081bf33c5b0f1b0514e253cb578e1ba\",\"name\":\"Miguel Useche\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1780624550\",\"url\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1780624550\",\"contentUrl\":\"https:\\\/\\\/skatox.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/aec95b02408138cb9d08288435373552.jpg?ver=1780624550\",\"caption\":\"Miguel Useche\"},\"sameAs\":[\"https:\\\/\\\/skatox.com\",\"https:\\\/\\\/x.com\\\/skatox\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex - El blog de Skatox","description":"Conoce como crear notificaciones en Vue.js utilizando el componente Snackbar y usando Vuex para centralizar el llamado a las notificaciones","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/","og_locale":"es_ES","og_type":"article","og_title":"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex - El blog de Skatox","og_url":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/","og_site_name":"El blog de Skatox","article_publisher":"https:\/\/www.facebook.com\/ElWeblogdeSkatox\/","article_published_time":"2019-08-19T12:10:15+00:00","article_modified_time":"2023-02-27T21:47:22+00:00","og_image":[{"width":625,"height":603,"url":"https:\/\/skatox.com\/blog\/images\/2015\/12\/skatux.png","type":"image\/png"}],"author":"Miguel Useche","twitter_card":"summary_large_image","twitter_creator":"@skatox","twitter_site":"@skatox","twitter_misc":{"Escrito por":"Miguel Useche","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/#article","isPartOf":{"@id":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/"},"author":{"name":"Miguel Useche","@id":"https:\/\/skatox.com\/blog\/#\/schema\/person\/e081bf33c5b0f1b0514e253cb578e1ba"},"headline":"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex","datePublished":"2019-08-19T12:10:15+00:00","dateModified":"2023-02-27T21:47:22+00:00","mainEntityOfPage":{"@id":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/"},"wordCount":545,"commentCount":0,"publisher":{"@id":"https:\/\/skatox.com\/blog\/#organization"},"keywords":["notificaciones","snackbars","vuejs","vuetify","vuex"],"articleSection":["Desarrollo web","Desarrollo y Programaci\u00f3n","Planetas"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/","url":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/","name":"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex - El blog de Skatox","isPartOf":{"@id":"https:\/\/skatox.com\/blog\/#website"},"datePublished":"2019-08-19T12:10:15+00:00","dateModified":"2023-02-27T21:47:22+00:00","description":"Conoce como crear notificaciones en Vue.js utilizando el componente Snackbar y usando Vuex para centralizar el llamado a las notificaciones","breadcrumb":{"@id":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/skatox.com\/blog\/2019\/08\/19\/crear-notificaciones-en-vue-js-con-vuetify-2-0-y-vuex\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/skatox.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Crear notificaciones en Vue.js con Vuetify 2.0 y Vuex"}]},{"@type":"WebSite","@id":"https:\/\/skatox.com\/blog\/#website","url":"https:\/\/skatox.com\/blog\/","name":"El blog de Skatox","description":"Compartiendo mis opiniones inform\u00e1ticas mas all\u00e1 de los 280 caracteres","publisher":{"@id":"https:\/\/skatox.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/skatox.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/skatox.com\/blog\/#organization","name":"El blog de Skatox","url":"https:\/\/skatox.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/skatox.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/skatox.com\/blog\/images\/2022\/03\/tux.png","contentUrl":"https:\/\/skatox.com\/blog\/images\/2022\/03\/tux.png","width":218,"height":218,"caption":"El blog de Skatox"},"image":{"@id":"https:\/\/skatox.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ElWeblogdeSkatox\/","https:\/\/x.com\/skatox","https:\/\/www.linkedin.com\/in\/skatox\/","https:\/\/www.youtube.com\/c\/MiguelAngelUsecheCastro","https:\/\/x.com\/skatox\/"]},{"@type":"Person","@id":"https:\/\/skatox.com\/blog\/#\/schema\/person\/e081bf33c5b0f1b0514e253cb578e1ba","name":"Miguel Useche","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1780624550","url":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1780624550","contentUrl":"https:\/\/skatox.com\/blog\/wp-content\/litespeed\/avatar\/aec95b02408138cb9d08288435373552.jpg?ver=1780624550","caption":"Miguel Useche"},"sameAs":["https:\/\/skatox.com","https:\/\/x.com\/skatox"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4207,"url":"https:\/\/skatox.com\/blog\/2020\/06\/15\/documental-sobre-la-creacion-de-vue-js\/","url_meta":{"origin":4083,"position":0},"title":"Documental sobre la creaci\u00f3n de Vue.js","author":"Miguel Useche","date":"15 de junio de 2020","format":false,"excerpt":"Vue.JS es una librer\u00eda de Javascript que he estado recientemente para mis proyectos. Me gusta por la facilidad de crear vistas, contar con el c\u00f3digo HTML, JavaScript y CSS en un mismo archivo de forma separada. Esto facilita ver la estructura del documento, ver los eventos y la apariencia en\u2026","rel":"","context":"En \u00abDesarrollo y Programaci\u00f3n\u00bb","block_context":{"text":"Desarrollo y Programaci\u00f3n","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/OrxmtDw4pVI\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4691,"url":"https:\/\/skatox.com\/blog\/2024\/04\/15\/design-patterns-for-vue-js-iniciate-en-vue-escribiendo-buen-codigo\/","url_meta":{"origin":4083,"position":1},"title":"Design Patterns for Vue.js: In\u00edciate en Vue escribiendo buen c\u00f3digo","author":"Miguel Useche","date":"15 de abril de 2024","format":false,"excerpt":"Recientemente, mientras exploraba Twitter\/X, vi una publicaci\u00f3n que destacaba contenido de calidad para perfeccionar las habilidades en Vue.JS. Entre las opciones, llam\u00f3 mi atenci\u00f3n el libro \"Design Patterns for Vue.JS\". Dado que en ese momento estaba enfocado en mejorar mis habilidades de pruebas de c\u00f3digo y aplicar patrones de dise\u00f1o,\u2026","rel":"","context":"En \u00abDesarrollo y Programaci\u00f3n\u00bb","block_context":{"text":"Desarrollo y Programaci\u00f3n","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/"},"img":{"alt_text":"Portada de Design Patterns for Vue.JS","src":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2023\/12\/design-patterns.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4409,"url":"https:\/\/skatox.com\/blog\/2022\/01\/24\/cargar-dinamicamente-mixins-distintos-desde-vue-router\/","url_meta":{"origin":4083,"position":2},"title":"Cargar din\u00e1micamente mixins distintos desde Vue router","author":"Miguel Useche","date":"24 de enero de 2022","format":false,"excerpt":"Si estas haciendo aplicaciones con Vue.js es probablemente que est\u00e9s usando los mixins para reutilizar el c\u00f3digo. En algunos casos, existe la posibilidad de que tengas dos o m\u00e1s mixins con los mismos nombres de m\u00e9todos pero implementando las funcionalidades de forma distinta. Pero solo necesites importar\/inyectar uno solo en\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5742,"url":"https:\/\/skatox.com\/blog\/2025\/11\/24\/documental-sobre-la-historia-de-vite\/","url_meta":{"origin":4083,"position":3},"title":"Documental sobre la historia de Vite","author":"Miguel Useche","date":"24 de noviembre de 2025","format":false,"excerpt":"La gente de CultRepo ha sacado un documental sobre la historia de Vite, el software de construcci\u00f3n de Javascript m\u00e1s popular en los \u00faltimos a\u00f1os. Me sorprende la realizaci\u00f3n de este documental porque, a pesar de que Vite es muy usado actualmente, generalmente los documentales que hacen son de tecnolog\u00edas\u2026","rel":"","context":"En \u00abDesarrollo y Programaci\u00f3n\u00bb","block_context":{"text":"Desarrollo y Programaci\u00f3n","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/img.youtube.com\/vi\/bmWQqAKLgT4\/0.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4437,"url":"https:\/\/skatox.com\/blog\/2022\/05\/30\/como-crear-un-menu-de-navegacion-multi-idioma-en-shopify\/","url_meta":{"origin":4083,"position":4},"title":"C\u00f3mo crear un men\u00fa de navegaci\u00f3n multi idioma en Shopify","author":"Miguel Useche","date":"30 de mayo de 2022","format":false,"excerpt":"Si creas un aplicaci\u00f3n embebida en Shopify, tienes la posibilidad de crear un men\u00fa de navegaci\u00f3n multi idioma para acceder a las distintas partes de tu aplicaci\u00f3n, en el idioma establecido para la cuenta del administrador. El men\u00fa de navegaci\u00f3n de una aplicaci\u00f3n embebida Normalmente \u00e9ste men\u00fa lo puedes definir\u2026","rel":"","context":"En \u00abDesarrollo web\u00bb","block_context":{"text":"Desarrollo web","link":"https:\/\/skatox.com\/blog\/category\/todo-lo-relacionado-al-desarrollo-de-software\/desarrollo-web\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2022\/05\/shopify-i18n-embed-menu.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2022\/05\/shopify-i18n-embed-menu.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2022\/05\/shopify-i18n-embed-menu.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/skatox.com\/blog\/images\/2022\/05\/shopify-i18n-embed-menu.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":812,"url":"https:\/\/skatox.com\/blog\/2009\/06\/29\/filtrar-la-publicidad-de-notificaciones-de-quiz-en-el-facebook\/","url_meta":{"origin":4083,"position":5},"title":"Filtrar la publicidad de notificaciones de Quiz en Facebook","author":"Miguel Useche","date":"29 de junio de 2009","format":false,"excerpt":"Si eres de los que estas cansado de que al entrar al facebook lo\u00a0 \u00fanico que ves son las encuestas idiotas que toma la gente o publicidad de los juegos, pues aqu\u00ed\u00ad tengo una soluci\u00f3n mediante Facebook Purity, al instalarlo (con entrar a cada p\u00e1gina y darle clic en install),\u2026","rel":"","context":"En \u00abInternet\u00bb","block_context":{"text":"Internet","link":"https:\/\/skatox.com\/blog\/category\/internet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts\/4083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/comments?post=4083"}],"version-history":[{"count":0,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/posts\/4083\/revisions"}],"wp:attachment":[{"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/media?parent=4083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/categories?post=4083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skatox.com\/blog\/wp-json\/wp\/v2\/tags?post=4083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}