{"id":28827,"date":"2024-04-14T03:00:49","date_gmt":"2024-04-14T02:00:49","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/vue-3-directivas-personalizadas-potencia-tu-app\/"},"modified":"2024-06-03T18:44:08","modified_gmt":"2024-06-03T17:44:08","slug":"vue-3-directivas-personalizadas-potencia-tu-app","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/","title":{"rendered":"Vue 3 Custom Directives: Power Your App"},"content":{"rendered":"<p>Vue.js is a progressive framework that allows developers to build user interfaces intuitively and efficiently. With the release of Vue 3, the ability to extend and customize functionality through custom directives has become more powerful and flexible. Directives in Vue provide a way to add functionality to components declaratively, which can simplify code and improve application organization and maintenance.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#%C2%BFQue_Son_las_Directivas_en_Vue\" >What Are Directives in Vue?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Creacion_de_Directivas_Personalizadas_en_Vue_3\" >Creating Custom Directives in Vue 3<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#El_Setup_Basico\" >The Basic Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Ejemplo_Basico_Directiva_de_Foco\" >Basic Example: Focus Directive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Utilizacion_en_Componentes_Vue\" >Use in Vue Components<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Casos_de_Uso_Avanzados\" >Advanced Use Cases<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Modificadores\" >Modifiers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Ejemplo_Directiva_para_Tooltips\" >Example: Policy for Tooltips<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Directivas_Globales_y_Locales\" >Global and Local Directives<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Registro_Global\" >Global Registry<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Registro_Local\" >Local Registry<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nelkodev.com\/en\/blog\/vue-3-custom-directives-power-your-app\/#Buenas_Practicas_y_Consejos\" >Good Practices and Tips<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_Son_las_Directivas_en_Vue\"><\/span>What Are Directives in Vue?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Directives in Vue are special attributes prefixed <code>v-<\/code>, which are placed on DOM elements to perform tasks such as manipulating the DOM, adding event handlers, etc. Some of the more well-known built-in policies include <code>v-bind<\/code> to bind element attributes, <code>v-model<\/code> for bidirectional data linking, and <code>v-if<\/code> for conditionals.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Creacion_de_Directivas_Personalizadas_en_Vue_3\"><\/span>Creating Custom Directives in Vue 3<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"El_Setup_Basico\"><\/span>The Basic Setup<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Creating a custom directive in Vue 3 involves defining it and then registering it so that it can be used in application components. A custom policy is defined by an object that can have several lifecycle functions:<\/p>\n<ul>\n<li><strong>bind<\/strong>: Called only once, when the directive is first bound to the element. It is useful for performing initial configuration actions.<\/li>\n<li><strong>inserted<\/strong>: Invoked when the linked element has been inserted into the parent DOM node.<\/li>\n<li><strong>update<\/strong>: Called after the element&#039;s content has been updated, but before the DOM is updated. Useful for reacting to changes in policy values.<\/li>\n<li><strong>componentUpdated<\/strong>: Called once the component and children have been updated.<\/li>\n<li><strong>unbind<\/strong>: Called only once, when the directive is detached from the element.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplo_Basico_Directiva_de_Foco\"><\/span>Basic Example: Focus Directive<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"&quot;language-javascript&quot;\">app.directive(&#039;focus&#039;, { mounted(el) { el.focus(); } });<\/code><\/pre>\n<p>This simple example creates a directive called <code>v-focus<\/code> which can be used to set focus on an input element as soon as it is mounted.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Utilizacion_en_Componentes_Vue\"><\/span>Use in Vue Components<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"&quot;language-vue&quot;\"><input \/><\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Casos_de_Uso_Avanzados\"><\/span>Advanced Use Cases<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Modificadores\"><\/span>Modifiers<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Directives can accept modifiers that allow you to alter their behavior. For example, a policy that applies an event listener might have a switch to run on the capture or bubble phase of the event.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplo_Directiva_para_Tooltips\"><\/span>Example: Policy for Tooltips<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"&quot;language-javascript&quot;\">app.directive(&#039;tooltip&#039;, { mounted(el, binding) { el.setAttribute(&#039;title&#039;, binding.value); el.classList.add(&#039;tooltip-base&#039;); }, updated(el , binding) { el.setAttribute(&#039;title&#039;, binding.value);<\/code><\/pre>\n<p>This directive allows any element to have a tooltip simply by using <code>v-tooltip=&quot;my text&quot;<\/code> which facilitates reuse and maintenance.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Directivas_Globales_y_Locales\"><\/span>Global and Local Directives<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Vue allows the definition of policies at both a global and local level. While global policies are available throughout the application, local policies are defined within components and are only available at the component scope.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Registro_Global\"><\/span>Global Registry<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"&quot;language-javascript&quot;\">app.directive(&#039;my-directive&#039;, {...});<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Registro_Local\"><\/span>Local Registry<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre><code class=\"&quot;language-vue&quot;\">&lt;script&gt;\nexport default {\n  directives: {\n    &#039;mi-directiva&#039;: {\n      mounted(el, binding, vnode) {\n        \/\/ Personaliza el elemento\n      }\n    }\n  }\n}\n&lt;\/script&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Buenas_Practicas_y_Consejos\"><\/span>Good Practices and Tips<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Using custom directives is extremely powerful, but must be done carefully. Here are some tips:<\/p>\n<ol>\n<li><strong>Clarity<\/strong>: Using directives should make the code clearer and less complicated.<\/li>\n<li><strong>Reusability<\/strong>: Design directives that can be reused in different parts of your application or even between projects.<\/li>\n<li><strong>Maintenance<\/strong>: Make sure policies don&#039;t become too complex or difficult to maintain.<\/li>\n<\/ol>\n<p>For more details and support on your Vue 3 projects, feel free to visit <a href=\"https:\/\/nelkodev.com\/en\/\">my blog<\/a> or contact me <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">here<\/a>. Vue 3 offers an incredible set of tools to make your applications not only work well, but also a pleasure to maintain and extend.<\/p>","protected":false},"excerpt":{"rendered":"<p>Vue.js is a progressive framework that allows developers to build user interfaces in an intuitive and efficient manner. With the release of Vue 3, the ability to extend and customize functionality through custom directives has become more powerful and flexible. Directives in Vue offer a way to add functionality to your web pages.<\/p>","protected":false},"author":1,"featured_media":28828,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,2207,1901],"tags":[1960,205,563,2208,408,1061,627,1008,566],"class_list":["post-28827","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-nodejs","category-pruebas-de-proyecto","tag-app","tag-blog","tag-directivas","tag-nodejs","tag-personalizadas","tag-potencia","tag-proyecto","tag-pruebas","tag-vue"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28827","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28827"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28827\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28828"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28827"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28827"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}