---
title: "Installation"
description: "Add Formisch forms to a Nuxt app."
canonical_url: "https://nuxt-formisch.onmax.me/getting-started"
---
# Installation

> Add Formisch forms to a Nuxt app.

Nuxt Formisch is a Nuxt module for [Formisch](https://formisch.dev), a schema-based, headless form library, with [Valibot](https://valibot.dev) schemas. It auto-imports Formisch's composables, components, methods and types, adds a server helper that validates request bodies with the same schema, and ships an AutoForm component for [Nuxt UI](https://ui.nuxt.com).

It needs Nuxt 4.

## Install

<steps>

### Add the package

```bash [Terminal]
pnpm add nuxt-formisch valibot
```

`@formisch/vue` comes with the module; you don't install it yourself.

### Register the module

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['nuxt-formisch'],
})
```

</steps>

That's all the setup. Next, [build your first form](https://nuxt-formisch.onmax.me/getting-started/first-form).

## What you get

<table>
<thead>
  <tr>
    <th>
      Where
    </th>
    
    <th>
      Auto-imported
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Composables
    </td>
    
    <td>
      <code>
        useForm
      </code>
      
      , <code>
        useField
      </code>
      
      , <code>
        useFieldArray
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      Components
    </td>
    
    <td>
      <code>
        <FForm>
      </code>
      
      , <code>
        <FField>
      </code>
      
      , <code>
        <FFieldArray>
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      Methods
    </td>
    
    <td>
      <code>
        getInput
      </code>
      
      , <code>
        setInput
      </code>
      
      , <code>
        getErrors
      </code>
      
      , <code>
        setErrors
      </code>
      
      , <code>
        getDeepErrors
      </code>
      
      , <code>
        reset
      </code>
      
      , <code>
        validate
      </code>
      
      , <code>
        submit
      </code>
      
      , <code>
        handleSubmit
      </code>
      
      , <code>
        insert
      </code>
      
      , <code>
        remove
      </code>
      
      , and the rest of the <a href="https://nuxt-formisch.onmax.me/forms/methods">
        Formisch methods
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      Types
    </td>
    
    <td>
      <code>
        FormStore
      </code>
      
      , <code>
        FieldStore
      </code>
      
      , <code>
        SubmitHandler
      </code>
      
      , <code>
        SubmitEventHandler
      </code>
      
      , <code>
        ValidPath
      </code>
      
      , and the other user-facing Formisch types
    </td>
  </tr>
  
  <tr>
    <td>
      Utils
    </td>
    
    <td>
      <code>
        jsonToValibotSchema
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      Server routes
    </td>
    
    <td>
      <a href="https://nuxt-formisch.onmax.me/forms/server-validation">
        <code>
          readValidatedFormBody
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

The components are prefixed with `F` so they don't clash with your own `Form` or `Field`. [Configuration](https://nuxt-formisch.onmax.me/getting-started/configuration) changes the prefix or turns parts off.

## With Nuxt UI

When `@nuxt/ui` is in `modules`, the module also registers [`<FAutoForm>`](https://nuxt-formisch.onmax.me/auto-form) and auto-imports `introspectSchema`:

```bash [Terminal]
pnpm add @nuxt/ui
```

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


## Sitemap

See the full [sitemap](https://nuxt-formisch.onmax.me/sitemap.md) for all pages.