Nuxt/docs/2.guide/2.directory-structure/1.directives.md

title	head.title	description	navigation.icon
directives	directives/	The directives/ directory is where you put all your Vue directives.	i-ph-folder

Nuxt automatically imports any directive in this directory (along with directives that are registered by any modules you may be using).

| directives/
--| awesome.ts
--| focus.ts

<template>
  <div v-awesome v-focus>
  </div>
</template>

Directives Export Name

You must use always named exports for your directives. If you have SSR enable you must use object notation in your directives, otherwise Vue will throw an error about missing getSSROption.

import type { DirectiveBinding } from 'vue'

function mounted (el: HTMLElement, binding: TouchDirectiveBinding) {
  // ...
}

// other lifecycle hooks

export const Focus = {
  mounted
  // ...
}

// DONT' USE export default here
export default Focus

:link-example{to="/docs/examples/features/auto-imports"}