> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nuxt/nuxt/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Component utilities to help you work with components

# Components

Nuxt Kit provides a set of utilities to help you work with components. You can register components globally or locally, and also add directories to be scanned for components.

Components are the building blocks of your Nuxt application. They are reusable Vue instances that can be used to create a user interface.

## `addComponentsDir`

Register a directory to be scanned for components and imported only when used. Keep in mind, that this does not register components globally, until you specify `global: true` option.

### Type

```ts theme={null}
function addComponentsDir(dir: ComponentsDir, opts: { prepend?: boolean } = {}): void
```

### Parameters

**`dir`**: An object with the following properties:

| Property     | Type                 | Required | Description                                                                                                                      |
| ------------ | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `path`       | `string`             | `true`   | Path (absolute or relative) to the directory containing your components.                                                         |
| `pattern`    | `string \| string[]` | `false`  | Accept Pattern that will be run against specified path.                                                                          |
| `ignore`     | `string[]`           | `false`  | Ignore patterns that will be run against specified path.                                                                         |
| `prefix`     | `string`             | `false`  | Prefix all matched components with this string.                                                                                  |
| `pathPrefix` | `boolean`            | `false`  | Prefix component name by its path.                                                                                               |
| `global`     | `boolean`            | `false`  | If enabled, registers components to be globally available.                                                                       |
| `island`     | `boolean`            | `false`  | If enabled, registers components as islands.                                                                                     |
| `watch`      | `boolean`            | `false`  | Watch specified path for changes, including file additions and file deletions.                                                   |
| `extensions` | `string[]`           | `false`  | Extensions supported by Nuxt builder.                                                                                            |
| `transpile`  | `'auto' \| boolean`  | `false`  | Transpile specified path using build.transpile. If set to `'auto'`, it will set `transpile: true` if `node_modules/` is in path. |

**`opts`**:

| Property  | Type      | Required | Description                                                                                          |
| --------- | --------- | -------- | ---------------------------------------------------------------------------------------------------- |
| `prepend` | `boolean` | `false`  | If set to `true`, the directory will be prepended to the array with `unshift()` instead of `push()`. |

### Usage

```ts theme={null}
import { defineNuxtModule, addComponentsDir, createResolver } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxt/ui',
    configKey: 'ui',
  },
  setup() {
    const resolver = createResolver(import.meta.url)
    
    addComponentsDir({
      path: resolver.resolve('./runtime/components'),
      prefix: 'U',
      pathPrefix: false,
    })
  },
})
```

## `addComponent`

Register a component to be automatically imported.

### Type

```ts theme={null}
function addComponent(options: AddComponentOptions): void
```

### Parameters

**`options`**: An object with the following properties:

| Property          | Type                            | Required | Description                                                                                                           |
| ----------------- | ------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------- |
| `name`            | `string`                        | `true`   | Component name.                                                                                                       |
| `filePath`        | `string`                        | `true`   | Path to the component.                                                                                                |
| `declarationPath` | `string`                        | `false`  | Path to component's declaration file. Used to generate components' type templates.                                    |
| `pascalName`      | `string`                        | `false`  | Pascal case component name. If not provided, generated from the component name.                                       |
| `kebabName`       | `string`                        | `false`  | Kebab case component name. If not provided, generated from the component name.                                        |
| `export`          | `string`                        | `false`  | Specify named or default export. If not provided, set to `'default'`.                                                 |
| `global`          | `boolean`                       | `false`  | If enabled, registers component to be globally available.                                                             |
| `island`          | `boolean`                       | `false`  | If enabled, registers component as island.                                                                            |
| `mode`            | `'client' \| 'server' \| 'all'` | `false`  | Indicates if component should render on client, server or both. By default, renders on both.                          |
| `priority`        | `number`                        | `false`  | Priority of the component. If multiple components have the same name, the one with the highest priority will be used. |

### Usage

```ts theme={null}
import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  setup() {
    const resolver = createResolver(import.meta.url)

    addComponent({
      name: 'NuxtImg',
      filePath: resolver.resolve('./runtime/components/NuxtImg.vue'),
    })

    addComponent({
      name: 'NuxtPicture',
      filePath: resolver.resolve('./runtime/components/NuxtPicture.vue'),
    })
  },
})
```

## Auto-importing from npm packages

If you want to auto-import a component from an npm package, and the component is a named export (rather than the default), you can use the `export` option.

```ts theme={null}
import { addComponent, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup() {
    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
    addComponent({
      name: 'MyAutoImportedComponent',
      export: 'MyComponent',
      filePath: 'my-npm-package',
    })
  },
})
```

## Source

[View source on GitHub](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/components.ts)