Как вынести в отдельный файл кастомную директиву 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();
  }
}

Comments

[DDroll]

А почему эта чушь помечена, как верный ответ? См. ниже корректный ответ, для тех, кто как и я столкнулся с этой проблемой.

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

DDroll, может потому что автор вопроса отметил решением и это ему помогло? Не думал об этом?

[DDroll]

Алексей Ярков, каким образом ошибочный код, не связанный с вопросом, может решить чью-либо проблему? Откуда у тебя в твоем экспорте взялся mounted? Как ты привяжешь это потом к app? Просто бессмысленный набор символов) Я просто искал быстрый ответ на этот вопрос, и меня выбешивает, когда на вполне конкретный вопрос мне выдается информационный мусор, который задерживает поиск и тратит время. Понятия не имею, почему автор вопроса пометил это, как правильный ответ, с таким же успехом он мог пометить слово из трех букв. Может, он твой друг и вы так накручиваете себе рейтинг, я не знаю. Я свой ответ положил не для вас двоих, а для тех, кто так же, как и я случайно сюда залетит, чтобы они не зря потеряли время.

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

@DDroll

Откуда у тебя в твоем экспорте взялся mounted?

Ну, например, оттуда, что export default наружу предоставляет объект, у которого могут быть свойства и методы с любым именем.

export default {
  DDroll() {
    console.log('Бонжур ))');
  }
};

Можешь этот код импортировать в другой скрипт, вызвать метод и он отработает.

Ну а если без шуток, то код в ответе просто копипаста кода автора из вопроса ))
Как говорится: найди отличия ))

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

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

Answer 2

[DDroll]

https://vue2to3.linusb.org/part-1-global-api/globa... - здесь описание с примерами.