Nuxt Module

notform-nuxt is the official Nuxt module for NotForm. It wraps the manual installation steps covered in Installation into a single Nuxt module: instead of importing useNotForm, <NotForm>, <NotField>, <NotArrayField>, and <NotMessage> yourself in every file, the module registers them as Nuxt auto-imports, injects their types globally, and confirms they work correctly with Nuxt's SSR rendering — all with no extra configuration on your part.

Installation

The module is published to the official Nuxt Modules Registry, so it can be added with a single Nuxt CLI command rather than installing the package and editing nuxt.config.ts by hand:

npx nuxi module add notform

pnpm dlx nuxi module add notform

bunx nuxi module add notform

yarn dlx nuxi module add notform

npm install zod

pnpm add zod

bun add zod

yarn add zod

Manual Setup

If you'd rather not use the Nuxt CLI — for example, in a monorepo where you manage nuxt.config.ts by hand, or in a restricted environment where nuxi module add can't reach the registry — you can install and register the module yourself.

Add the dependency:

npm add notform-nuxt

pnpm add notform-nuxt

bun add notform-nuxt

yarn add notform-nuxt

Then add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['notform-nuxt'],
})

This has the exact same effect as running the CLI command above — the module doesn't behave any differently depending on how it was registered.

Features

Auto-imports

Once the module is registered, every core component and composable is available globally in your .vue files, without an import statement.

Compare the manual setup from Installation:

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

const form = useNotForm({ /* ... */ })
</script>

to the same file with notform-nuxt installed:

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

const form = useNotForm({ /* ... */ })
</script>

useNotForm, <NotForm>, <NotField>, <NotArrayField>, and <NotMessage> are all resolved automatically — only your validation library still needs a manual import, since that's a separate package the module doesn't own.

Type Safety

Auto-imported components and composables still carry their full generic types. useNotForm<TSchema> infers TSchema from the schema you pass it exactly as it would with a manual import, so form.values is typed to your schema's shape, and field path props are checked against it — all without a types array entry or a manual reference to the notform package in your project.

Server-side Rendering (SSR)

NotForm works with Nuxt's SSR rendering: the form's initial state is computed consistently on both the server-rendered HTML and the client-side Vue instance that takes over from it, so values and validation state don't flash, reset, or mismatch during hydration.

Next steps

The Nuxt module changes how NotForm's pieces are imported, but not how they're used. Continue to Quickstart to build your first form — every example there works identically whether you installed NotForm manually or through this module, just without the import line for NotForm itself.