A SSR app has the same code running on server and on client. Declaring a Vue directive (or directly importing it) in a .vue SFC file is usually enough for making it to work on non-SSR builds. But on SSR builds and due to the architecture of Vue 3 it requires some extra leg work.

Server-side builds require all Vue directives to also specify a getSSRProps() method in their definition.

How to declare a directive

The following is taken from Vue.js docs:

Since most custom directives involve direct DOM manipulation, they are ignored during SSR. However, if you want to specify how a custom directive should be rendered (i.e. what attributes it should add to the rendered element), you can use the getSSRProps directive hook:

const myDirective = {
  mounted (el, binding) {
    // client-side implementation:
    // directly update the DOM
    el.id = binding.value
  },

  getSSRProps (binding) {
    // server-side implementation:
    // return the props to be rendered.
    // getSSRProps only receives the directive binding.
    return {
      id: binding.value
    }
  }
}