Vuejs3 how to register a custom global directive in a separate folder?

Question

I wanted to move my global custom directive into a separate folder and import it from a file, but I fail to do so in Vue3.

I got a:

Uncaught TypeError: Cannot read properties of undefined (reading 'directive')

Here are my files:

main.js

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

import VueGtag from 'vue-gtag'
import '@/plugins/gtag'


createApp(App)
  .use(
    VueGtag,
    {
      config: { id: process.env.VUE_APP_GOOGLE_ANALYTICS_ID },
      pageTrackerTemplate(to) {
        return {
          page_title: to.name,
          page_path: to.path,
        }
      },
    },
    router
  )
  .use(router)
  .mount('#app')

/plugin/gtag.js

import Vue from 'vue'
import { event } from 'vue-gtag'

const track = binding => () => {
  event('click', {
    event_category: binding.value.category,
    event_label: binding.value.label,
    value: 1,
  })
}

Vue.directive('track', {
  beforeMount(el, binding) {
    const trackFn = track(binding)

    el.addEventListener('click', trackFn)
    el.trackFn = trackFn
  },
  unmounted(el) {
    el.removeEventListener('click', el.trackFn)
  },
})

I am aware, that my gtag.js with import Vue from 'vue' is so Vuejs2 and now it should be imported with { createApp }.
But I just don't know, how to make it in Vuejs3 with the directive?

---

EDIT: Thanks @Leo for the solution:

plugins/gtag.js

import { event } from 'vue-gtag'

const track = binding => () => {
  event('click', {
    event_category: binding.value.category,
    event_label: binding.value.label,
    value: 1,
  })
}

const TrackDirective = {
  beforeMount(el, binding) {
    const trackFn = track(binding)

    el.addEventListener('click', trackFn)
    el.trackFn = trackFn
  },
  unmounted(el) {
    el.removeEventListener('click', el.trackFn)
  },
}

export default TrackDirective

main.js

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

import VueGtag from 'vue-gtag'
import TrackDirective from '@/plugins/gtag'

createApp(App)
.directive('track', TrackDirective)
  .use(
    VueGtag,
    {
      config: { id: process.env.VUE_APP_GOOGLE_ANALYTICS_ID },
      pageTrackerTemplate(to) {
        return {
          page_title: to.name,
          page_path: to.path,
        }
      },
    },
    router
  )
  .use(router)
  .mount('#app')

Answer 1

You need to use directive direct on app variable

example bellow:

gtag.js

const TrackDirective = {
    beforeMount: (el, binding) => {
        el.addEventListener('click', () => {
            console.info('tracking')
        })
    }
}

export default TrackDirective

main.js

import TrackDirective from "./track";

const app = createApp(App)
app.directive('track', TrackDirective)
app.mount('#app')

some component

<template>
  <div v-track>
    click on this text
  </div>
</template>

reference: https://vuejs.org/guide/reusability/custom-directives.html#introduction