---
title: 'shared'
head.title: 'shared/'
description: 'Use the shared/ directory to share functionality between the Vue app and the Nitro server.'
navigation.icon: 'i-ph-folder'
---

The `shared/` directory allows you to share code that can be used in both the Vue app and the Nitro server.

::tip
The `shared/` directory is available in Nuxt v3.14+.
::

::important
Code in the shared directory cannot import any Vue or nitro code.
::

## Usage

**Method 1:** Using named export

```ts twoslash [shared/utils/capitalize.ts]
export const capitalize = (input: string) => {
  return input[0].toUpperCase() + input.slice(1)
}
```

**Method 2:** Using default export

```ts twoslash [shared/utils/capitalize.ts]
export default function capitalize (input: string) {
  return input[0].toUpperCase() + input.slice(1)
}
```

**Usage:** You can now use auto-imported utility functions in `.js`, `.ts` and `.vue` files within your Vue app and the `server/` directory.

If you have set `compatibilityVersion: 4` in your `nuxt.config.ts`, you can use the auto-imported functions in the `app/` directory. This is part of Nuxt's progressive compatibility features preparing for version 4.

If you have [set `compatibilityVersion: 4` in your `nuxt.config.ts`](https://nuxt.com/docs/getting-started/upgrade#opting-in-to-nuxt-4), you can use the auto-imported functions in the `app/` directory. This is part of Nuxt's progressive compatibility features preparing for version 4.

```vue [app.vue]
<script setup lang="ts">
const hello = capitalize('hello')
</script>

<template>
  <div>
    {{ hello }}
  </div>
</template>
```

```ts [server/api/hello.get.ts]
export default defineEventHandler((event) => {
  return {
    hello: capitalize('hello')
  }
})
```

## Auto Imports

Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. Files nested in directories within `shared/utils/` or `shared/types/` will not be auto-imported.

```bash [Directory Structure]
-| shared/
---| capitalize.ts        # Not auto-imported
---| formatters
-----| lower.ts           # Not auto-imported
---| utils/
-----| lower.ts           # Auto-imported
-----| formatters
-------| upper.ts         # Not auto-imported
---| types/
-----| bar.d.ts           # Auto-imported
```

Any other files you create in the shared folder must be manually imported using the `#shared` alias (automatically configured by Nuxt):

```ts
// For files directly in the shared directory
import capitalize from '#shared/capitalize'

// For files in nested directories
import lower from '#shared/formatters/lower'

// For files nested in a folder within utils
import upper from '#shared/utils/formatters/upper'
```

This alias ensures consistent imports across your application, regardless of the importing file's location.

:read-more{to="/docs/guide/concepts/auto-imports"}