How can I move directives from main.js into an external file Vue 3

Question

I would like to have a clean main.js and for this I want to move the directives into an external file. That is, to do something like

//main.js
import directives from "./extensions-vue/directives";
app.directive(directives);

and in an external file

export default {
    myDirective: {
        mounted(el) {
            alert(el);
        },
    },
};

My version of course does not work, how to do it correctly

Answer 1

Well they doesn't really offer a good option for it in the docs, I use it like this:

in directives/index.js:

export const focusDirective = {
  mounted(el) {
     el.focus();
 }};

in main.js:

import { focusDirective } from './directives'; // import all wanted directives
const app = createApp(App);
app.directive('focus', focusDirective );

I feel like its simpler and more intuitive then the other answer, But i'd prefer a way for my diretive file to register those directives globally without the need to handle it on main.js