Перед созданием глобальной директивы рекомендуем проанализировать её необходимость: действительно ли она будет полезна другим компонентам? Если нет, то лучше обойтись созданием локальной директивы (см. предыдущий урок Помимо встроенных директив (таких как v-model и v-show), Vue позволяет использовать
ваши собственные.

При этом важно понимать, что основным механизмом создания повторно используемого
кода во Vue всё-таки являются компоненты.

Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские
директивы могут очень пригодиться.

Например, чтобы после загрузки страницы в поле ввода сразу устанавливался фокус.
Штатными средствами такое сделать не получится, поэтому нужно создать свою
"директиву" (специальный атрибут к DOM-элементу).

Это можно сделать двумя способами:

1) зарегистрировать глобальную директиву (для всех компонентов vue)
2) зарегистрировать локально (доступную только в вашем компоненте). Для этого нужно
передать опцию directives при определении компонента.

Подробнее... ).

Штатные глобальные директивы располагаются в модуле ui в директории /modules/ui/install/js/ui/vue/directives/.

Все директивы должны быть в виде расширений СoreJS в новом формате. В общем случае ваша директива будет выглядеть следующим образом:

/some-directive/config.php
/some-directive/ui.vue.directives.some-directive.js

Cодержимое файла config.php:

<?
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true)
{
   die();
}

return array(
   'js' => Array(
      '/bitrix/js/ui/vue/directives/some-directive/ui.vue.directives.some-directive.js',
   ),
   'rel' => array('ui.vue'),
   'skip_core' => true,
   'bundle_js' => 'ui_vue'.(defined('VUEJS_DEBUG') && VUEJS_DEBUG? '_debug': '')
);

В зависимостях обязательно должен быть ui.vue. Если не используются библиотеки CoreJS внутри директивы, укажите ключ 'skip_core' => true.

Содержимое файла ui.vue.directives.some-directive.js:

(function(window)
{
   "use strict";

   /**
    * Some Directive Vue directive
    *
    * @package bitrix
    * @subpackage ui
    * @copyright 2001-2019 Bitrix
    */

   /* 
      Example of usage:
      ...
    */

   const SomeClassForDirectiveLogic =
   {
      ...
   };

   BX.Vue.directive('bx-some-directive',
   {
      bind(element, params)
      {
         ...
      }
   });

})(window);

Внутри файла указывается пример использования директивы или ссылка на документацию в аннотации JsDoc.

Если требуется сложная логика, можно вынести её за пределы директивы. Если её можно повторно использовать в других модулях и компонентах, рекомендуется вынести за пределы данного расширения.

Для регистрации директивы используется метод BX.Vue.directive (синтаксис использования полностью совпадает с Vue.directive Пользовательские директивы

Помимо встроенных директив (таких как v-model и v-show), Vue позволяет использовать ваши собственные. При этом важно понимать, что основным механизмом создания повторно используемого кода во Vue 2.0 всё-таки являются компоненты. Тем не менее, для выполнения низкоуровневых операций с DOM пользовательские директивы могут очень пригодиться.

Подробнее... ).

Имя директивы должно начинаться с префикса bx- для исключения пересечения с директивами внешних разработчиков.