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

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