document `getSSRProps` for directives

I believe the documentation is missing something or there is a bug about getSSRProps: https://v3.nuxtjs.org/guide/directory-structure/plugins/#vue-directives

When I copy the content and paste it into /plugins/focus.ts or /plugins/focus.client.ts (in a project without any directives just with pages) I get the same getSSRProps missing error as anyone above - but the besides the error, it seems to work on most mounted elements.

(To check, the .focus() changed to .style.color = 'green' did its job)

_Originally posted by @BananaAcid in https://github.com/nuxt/framework/issues/3154#issuecomment-1213340079_

[chris-visser]

Oh wauw. Just realized I posted my finding on my Passionate People account. I will repost this issue on the Vue repo. Thanks!

[Lyokolux]

Turning it into a composable made it works:

import { Directive } from "vue"

type UseVOutsideFocusOnlyReturnType = {
  vOutsideFocusOnly: Directive
}
export const useVOutsideFocusOnly = (): UseVOutsideFocusOnlyReturnType => ({
 // recommend to use the same name in the whole app with a property
  vOutsideFocusOnly: {
    mounted(el: HTMLElement) {
      const { focused } = useFocusWithin(el)
      watch(focused, focused => {
        el.tabIndex = focused ? -1 : 0
      })
    },
    getSSRProps(binding, vnode) {
      // you can provide SSR-specific props here
      return {}
    }
  }
})

and in a <script> tag inside a vue component:

const { vOutsideFocusOnly } = useVOutsideFocusOnly()

and in the template:

<NuxtLink :to="myBeautifulLink" v-outside-focus-only>...</NuxtLink>

It solves my problem in Vue 3 with <script setup>. I don’t know how to solve it for Vue 2.7 though.