Installation

Add NotForm to your Vue 3 or Vite project.

NotForm is distributed as a single npm package, notform, and can be used directly in any Vue 3 application — no build plugin, compiler macro, or bundler configuration required.

If you are using Nuxt, skip ahead to the Nuxt section below and use the official Nuxt Module instead of the manual steps here. It handles imports and setup for you.

Install the package

NotForm validates values using Standard Schema rather than a validation language of its own. This means NotForm doesn't ship a validator — you bring your own compatible library alongside it. Popular options include Zod, Valibot, and ArkType.

Pick one of these (this guide uses zod in its examples) and install it together with notform using your preferred package manager:

pnpm add notform zod

yarn add notform zod

npm install notform zod

bun add notform zod

You can replace zod with another Standard Schema-compatible validation library if you prefer. Every code example in these docs uses zod, but nothing about NotForm's API changes based on which validator you choose.

Vue and Vite

NotForm is designed for Vue 3 and works with standard Vue applications out of the box — there is no application-level setup step, plugin installation, or provider component to configure before you can use it.

Once installed, import the components and composables you need directly from notform:

App.vue

<script setup lang="ts">
import { NotField, NotForm, NotMessage, useNotForm } from 'notform'
import { z } from 'zod'

const schema = z.object({
  email: z.email('Invalid email'),
})

const form = useNotForm({
  onSubmit(values) {
    console.log('Form submitted:', values)
  },
  schema,
})
</script>

<template>
  <NotForm
    :form="form"
    @submit="form.submit"
  >
    <!-- form fields go here -->
  </NotForm>
</template>

NotForm follows the normal Vue component model: there is no global registration step, and nothing is installed as a Vue plugin. Import only the pieces you actually use — useNotForm to create the form instance, <NotForm> to provide it to your fields, and <NotField> / <NotArrayField> / <NotMessage> for the fields themselves.

The full breakdown of this example — defining a schema, wiring up individual fields, and displaying validation messages — is covered step by step in Quickstart.

Nuxt

For Nuxt applications, use the Nuxt Module rather than manually installing and importing notform as shown above.

The module installs the package for you, registers every component and composable as a Nuxt auto-import, and wires up type support — so you can start writing <NotForm> and useNotForm directly in your .vue files without an import statement.

Next steps

NotForm is now installed and ready to use in your project.

Continue to Quickstart to build your first form end-to-end: defining a schema, initializing the form, rendering fields, and displaying validation errors.

Introduction

Headless, schema-agnostic form management for Vue 3 and Nuxt.

Quickstart

Build a fully typed login form with validation in minutes.