---
layout: ../../layouts/PageLayout.astro
title: Nuxt integration
description: VeeValidate Nuxt module
order: 3
---

import DocTip from '@/components/DocTip.vue';

# @vee-validate/nuxt

<div class="mb-10 w-full flex items-center justify-center">
  <img class="h-40" src="https://github.com/logaretm/vee-validate/raw/main/logo.png" />

  <a class="ml-20" href="https://nuxt.com/" target="_blank">
    <img class="h-40" src="https://nuxt.com/assets/design-kit/logo/icon-green.svg" />
  </a>
</div>

<p align="center">
  <a href="https://github.com/sponsors/logaretm">
    <img src="https://sponsors.logaretm.com/sponsors.svg" />
  </a>
</p>

Official vee-validate's Nuxt module

## Features

- Auto import of vee-validate components
- Auto import of vee-validate composables

<DocTip type="warn">

No types are exposed by default to avoid having conflicts with other libraries, aside from vee-validate's main API components/composables. You can still import them via `vee-validate`.

</DocTip>

## Getting Started

In your nuxt project install the vee-validate nuxt module:

```sh
# npm
npm i @vee-validate/nuxt

# pnpm
pnpm add @vee-validate/nuxt

# yarn
yarn add @vee-validate/nuxt
```

Then add the module to your `modules` config in `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  // ...
  modules: [
    //...
    '@vee-validate/nuxt',
  ],
});
```

## Configuration

You can configure a few aspects of the `@vee-validate/nuxt` module. Here is the config interface:

```ts{3-19}
export default defineNuxtConfig({
  // ...
  modules: [
    //...
    [
      '@vee-validate/nuxt',
      {
        // disable or enable auto imports
        autoImports: true,
        // Use different names for components
        componentNames: {
          Form: 'VeeForm',
          Field: 'VeeField',
          FieldArray: 'VeeFieldArray',
          ErrorMessage: 'VeeErrorMessage',
        },
      },
    ],
  ],
});
```

You can also use the `veeValidate` config key instead of the array syntax:

```ts{7-16}
export default defineNuxtConfig({
  // ...
  modules: [
    //...
    '@vee-validate/nuxt',
  ],
  veeValidate: {
    // disable or enable auto imports
    autoImports: true,
    // Use different names for components
    componentNames: {
      Form: 'VeeForm',
      Field: 'VeeField',
      FieldArray: 'VeeFieldArray',
      ErrorMessage: 'VeeErrorMessage',
    },
  },
});
```
