Nuxt Module

The notform-nuxt module provides a first-class experience for using notform in your Nuxt applications. It handles component and composable registration automatically so you can start building forms immediately.

Installation

Add the Nuxt module to your project:

pnpm add notform-nuxt

yarn add notform-nuxt

npm install notform-nuxt

bun add notform-nuxt

Configuration

Add the module to your nuxt.config.ts:

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

Features

Auto-imports

When autoImport is enabled (default), you don't need to manually import notform components or composables. They are available globally in your Nuxt app:

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

// useNotForm is auto-imported!
const { state, id, submit } = useNotForm({
  schema: z.object({
    name: z.string().min(2)
  })
})
</script>

<template>
  <!-- NotForm, NotField, NotMessage are auto-imported! -->
  <NotForm :id="id" @submit="submit">
    <NotField name="name" v-slot="{ methods, name }">
      <input v-model="state.name" v-bind="methods" :name="name" />
      <NotMessage :name="name" />
    </NotField>
  </NotForm>
</template>

Type Safety

The Nuxt module environment automatically picks up the types for NotForm components and composables, providing full IntelliSense support in your Vue files.

Server-side Rendering (SSR)

NotForm is fully compatible with Nuxt's SSR. Form state and validation work seamlessly on both the server and client.

Options

Next Steps

Now that you have NotForm set up in your Nuxt project, you can explore the API Reference to learn more about its capabilities.