Как вынести в отдельный файл кастомную директиву Vue 3?

Question

[Александра]

Всем привет, имеется кастомная директива focus в main.js, все работает как надо. Но не могу сообразить каким образом оформить и подключить директиву из отдельного файла, подскажите пожалуйста возможности реализации

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import './assets/scss/common.scss';

import DefaultLayout from './layouts/Default.vue';
import UikitLayout from './layouts/UikitLayout.vue';

const app = createApp(App);

// Регистрируем глобальную пользовательскую директиву `v-focus`
app.directive('focus', {
  // Когда привязанный элемент будет примонтирован в DOM...
  mounted(el) {
    // Переключаем фокус на элемент
    el.focus();
  }
});

app.component('DefaultLayout', DefaultLayout);
app.component('UikitLayout', UikitLayout);

app.use(router);
app.use(store);

app.mount('#app');

Answer 1

[Алексей Ярков]

export default {
  // Когда привязанный элемент будет примонтирован в DOM...
  mounted(el) {
    // Переключаем фокус на элемент
    el.focus();
  }
}