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

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

```bash [Directory Structure]
| directives/
--| awesome.ts
--| focus.ts
```

```html [app.vue]
<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`.

```ts
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"}