Nuxt Module
Seamless integration with Nuxt 4 with auto-imports and easy configuration.
The 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.
Setup
Install the Nuxt module
pnpm add notform-nuxt
yarn add notform-nuxt
npm install notform-nuxt
bun add notform-nuxt
Add the Nuxt module to your project:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['notform-nuxt'],
})
Features
Auto-imports
You don't need to manually import notform components or composables. They are available globally in your Nuxt app.
What gets auto-imported
| Export | Type |
|---|---|
useNotForm | Composable |
NotForm | Component |
NotField | Component |
NotMessage | Component |
NotArrayField | Component |
Type Safety
The Nuxt module environment automatically picks up the types for NotForm components and composables, providing full IntelliSense support in your Vue files — NotFormInstance, UseNotFormConfig, NotFieldProps, and the rest can be used in defineProps and type annotations without importing.
Server-side Rendering (SSR)
NotForm is fully compatible with Nuxt's SSR. Form state and validation work seamlessly on both the server and client.
Usage
pages/signup.vue
<script setup lang="ts">
import { z } from 'zod'
// No imports — useNotForm, NotForm, NotField, NotMessage are auto-imported
const form = useNotForm({
schema: z.object({
email: z.string().email(),
password: z.string().min(8),
}),
initialValues: { email: '', password: '' },
onSubmit: async (values) => {
await $fetch('/api/signup', { method: 'POST', body: values })
},
})
</script>
<template>
<NotForm :form="form" @submit="form.submit">
<NotField path="email" v-slot="{ events }">
<input v-model="form.values.email" type="email" v-bind="events" />
<NotMessage path="email" />
</NotField>
<NotField path="password" v-slot="{ events }">
<input v-model="form.values.password" type="password" v-bind="events" />
<NotMessage path="password" />
</NotField>
<button type="submit">Sign up</button>
</NotForm>
</template>