---
title: "Installation"
description: "Install NotForm and a schema validator in a Vue 3, Vite, or Nuxt application."
canonical_url: "https://notformdocs.vercel.app/docs/getting-started/installation"
---

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

NotForm ships as two packages that expose the same API.

<table>
<thead>
  <tr>
    <th>
      Package
    </th>
    
    <th>
      Use it for
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        notform
      </code>
    </td>
    
    <td>
      Vue 3 and Vite applications.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @notform/nuxt
      </code>
    </td>
    
    <td>
      Nuxt 4 applications. Adds auto-imports for the same API.
    </td>
  </tr>
</tbody>
</table>

## Requirements

- **Vue 3.5 or later** (declared as a peer dependency of `notform`).
- **Nuxt 4 or later** when using `@notform/nuxt`.
- **A Standard Schema-compatible validator**, installed separately. The examples use Zod.
- **Node.js 24 or later**. Depending on your package manager or environment settings, an older version may warn or fail.

## Vue and Vite

Install `notform` and a validator:

<code-group>

```bash [pnpm]
pnpm add notform zod
```

```bash [npm]
npm install notform zod
```

```bash [yarn]
yarn add notform zod
```

```bash [bun]
bun add notform zod
```

</code-group>

NotForm needs no Vue plugin and no global registration. Import what you use:

```ts
import { ArrayField, Field, FieldError, Form, useForm } from 'notform'
```

## Nuxt

Install the module and a validator:

<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>

Register the module, then restart the dev server:

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

`useForm`, `Form`, `Field`, `ArrayField`, and `FieldError` are now auto-imported. See the [Nuxt module guide](https://notformdocs.vercel.app/docs/getting-started/nuxt-module) for aliases and type imports.

<tip>

Code samples in these docs import from `notform` so they work anywhere. In a Nuxt project, delete the `import ... from 'notform'` line and keep the rest.

</tip>

## Choose a validator

NotForm accepts any object schema that implements [Standard Schema](https://standardschema.dev). It does not bundle a validator and does not translate rules between libraries. Switching validators changes only the schema.

<code-group>

```ts [Zod]
import { z } from 'zod'

const schema = z.object({
  email: z.email('Enter a valid email address.'),
})
```

```ts [Valibot]
import * as v from 'valibot'

const schema = v.object({
  email: v.pipe(v.string(), v.email('Enter a valid email address.')),
})
```

```ts [ArkType]
import { type } from 'arktype'

const schema = type({
  email: 'string.email',
})
```

</code-group>

<note>

Zod examples use the Zod 4 API (`z.email()`). On Zod 3, write `z.string().email()` instead. Standard Schema support requires Zod 3.24 or later, and recent releases of Valibot and ArkType.

</note>

The schema must be an **object** schema. A bare `z.string()` is rejected by TypeScript, because form values are always a keyed object.

## Verify the install

Render this component. Submitting an empty field should show the message, and a valid email should log the data.

<code-collapse>

```vue
<script setup lang="ts">
import { Field, FieldError, Form, useForm } from 'notform'
import { z } from 'zod'

const form = useForm({
  initialValues: { email: '' },
  onSubmit: (data) => {
    return console.log(data)
  },
  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>

## Next steps

Continue with the [Quickstart](https://notformdocs.vercel.app/docs/getting-started/quickstart).

## Sitemap

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