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 should use always named exports for your directives. If you want to use default exports, you should use as in the import.

import type { DirectiveBinding } from 'vue'

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

// other lifecycle hooks

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

// don't use export default here
export default Focus

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