Add custom directive to Vue3

[rico]

I try to add a custom directive to the vue 3 instance. Tried the following approach:

import { createApp, h } from 'vue'
import {createInertiaApp, Link} from '@inertiajs/inertia-vue3'

createInertiaApp({

  resolve: name => {
   return require(`./Pages/${name}`).default
  },

  setup({ el, App, props, plugin }) {

    const app = createApp({ render: () => h(App, props) })

    app.use(plugin)
    app.component('Link', Link)
    app.mount(el)

    app.directive('autofocus', {
      mounted(el) {
        el.focus()
      }
    })

  },
})

But this leads to the error: Cannot read properties of undefined (reading 'deep')

Thanks for your help!

[RobertBoes]

You should add the directive before the app is mounted, so like this

app.directive('autofocus', {
  // ...
})
app.mount(el)

[rico]

Nice - thank you very much!

[Mllexx]

worked for me as well, thank you.