---
title: "Nuxt module"
description: "Register @notform/nuxt to use NotForm's components and useForm as Nuxt auto-imports, and resolve naming conflicts with aliases."
canonical_url: "https://notformdocs.vercel.app/docs/getting-started/nuxt-module"
---

> Index of every page on this site: [llms.txt](https://notformdocs.vercel.app/llms.txt)

`@notform/nuxt` registers NotForm's public components and composable as Nuxt auto-imports. It does not change validation, field, or submission behavior. Every other page in these docs applies unchanged.

The module requires Nuxt 4 or later. For Vue or Vite applications, use the [`notform` package](https://notformdocs.vercel.app/docs/getting-started/installation).

## Install and register

<code-group>

```bash [pnpm]
pnpm add @notform/nuxt zod
```

```bash [npm]
npm install @notform/nuxt zod
```

```bash [yarn]
yarn add @notform/nuxt zod
```

```bash [bun]
bun add @notform/nuxt zod
```

</code-group>

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@notform/nuxt'],
})
```

<tip>

Restart the dev server after changing the module list.

</tip>

## What is auto-imported

<table>
<thead>
  <tr>
    <th>
      Name
    </th>
    
    <th>
      Kind
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        useForm
      </code>
    </td>
    
    <td>
      Composable
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Form
      </code>
    </td>
    
    <td>
      Component
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        Field
      </code>
    </td>
    
    <td>
      Component
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ArrayField
      </code>
    </td>
    
    <td>
      Component
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        FieldError
      </code>
    </td>
    
    <td>
      Component
    </td>
  </tr>
</tbody>
</table>

Your schema library is not auto-imported. Import it as usual.

<code-collapse>

```vue
<script setup lang="ts">
import { z } from 'zod'

const form = useForm({
  initialValues: { email: '' },
  onSubmit(data) {
    console.log(data.email)
  },
  schema: z.object({
    email: z.email('Enter a valid email address.')
  }),
})
</script>

<template>
  <Form :form="form">
    <Field
      v-slot="{ field }"
      :field="form.field('email')"
    >
      <label :for="field.path">Email</label>

      <input
        :id="field.path"
        v-model="field.model"
        v-bind="field.events"
        type="email"
      >

      <FieldError :errors="field" />
    </Field>

    <button type="submit">
      Submit
    </button>
  </Form>
</template>
```

</code-collapse>

## Import types

Types are not auto-imported. To import them, add `notform` as a direct dependency of your app. Package managers such as pnpm do not expose a module's own dependencies to your code.

```bash
pnpm add notform
```

```ts
import type { SchemaInput, SchemaOutput, UseFormInstance } from 'notform'
```

The same applies if you prefer explicit imports of components or `useForm` over auto-imports. Both approaches work together.

## Avoid name conflicts

If your app, or another module, already defines `Form`, `Field`, `FieldError`, `ArrayField`, or `useForm`, register NotForm's version under another name with the `aliases` option. Add only the aliases you need.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@notform/nuxt'],
  notform: {
    aliases: {
      Field: 'NotField',
      FieldError: 'NotFieldError',
      Form: 'AppForm',
      useForm: 'useAppForm',
    },
  },
})
```

Then use the alias everywhere:

```vue
<template>
  <AppForm :form="form">
    <NotField
      v-slot="{ field }"
      :field="form.field('email')"
    >
      <NotFieldError :errors="field" />
    </NotField>
  </AppForm>
</template>
```

Keys are the original NotForm names. Values are the names you want to use.

<tip>

Component libraries that ship their own `Field` or `FieldError`, such as ShadcnVue, are the most common source of conflicts. See [ShadcnVue](https://notformdocs.vercel.app/docs/integrations/shadcn-vue).

</tip>

## Server-side rendering

NotForm creates form state during setup and does not need browser APIs to do it, so forms render on the server. Validation timers and event handlers only run in the browser, in response to user interaction.

## Next steps

- Build your first form with the [Quickstart](https://notformdocs.vercel.app/docs/getting-started/quickstart).
- Use NotForm with Nuxt UI in the [Nuxt UI guide](https://notformdocs.vercel.app/docs/integrations/nuxt-ui).

## Sitemap

See the full [sitemap](https://notformdocs.vercel.app/sitemap.md) for all pages.