Vueform Documentation

Vueform is an open-source form framework for Vue.js designed to standardize the form building process. Key features include:

• Rich Element Library: 25+ form elements including multi-file uploads, date pickers, and rich text editors.
• Advanced Layout: Support for element nesting and repeating elements.
• Theming: A complete theming and templating system with Tailwind CSS support.
• Robust Validation: 50+ validators including async, dependent, and custom rules.
• Logic & Flow: Conditional logic (with/and/or groups) and built-in support for multi-step forms.
• Accessibility & i18n: Fully accessible components with global i18n support for translating form contents.

You can quickly scaffold a new Vueform project using any of the following package manager commands. This is the recommended way to get started with a pre-configured environment.

npm create vueform@latest

yarn create vueform

pnpm create vueform

bun create vueform

To use Vueform within a Nuxt project, you must install the official @vueform/nuxt module. Detailed installation steps, including dependency requirements and configuration, can be found in the official documentation.

Refer to the official guide for the complete installation process: https://vueform.com/docs/installation

For rapid form development, you can use the Vueform Drag and Drop Builder. This tool allows you to visually construct forms and then export the resulting configuration as a native Vue component for use in your application.

https://builder.vueform.com/demo

The Columns service accepts several formats for defining column sizes. These are automatically serialized into a breakpoint-based structure.

1. Simple Number/String

Provides a single size for the container at the default breakpoint.

columns: 8
// Serializes to: { default: { container: 8 } }

2. Object by Type

Define sizes for specific parts (container, label, wrapper).

// Single size for all types at default breakpoint
columns: { container: 8 }

// Specific sizes for types with breakpoint overrides
columns: { 
  container: 8, 
  wrapper: { default: 8, lg: 12 } 
}

3. Object by Breakpoint

Define sizes for the container across different breakpoints.

// Container size varies by breakpoint
columns: { lg: 8, md: { container: 6 } }

Expressions in Vueform are strings that contain placeholders wrapped in curly braces {}. The expression engine parses these placeholders, evaluates them against the current form data, and replaces them with the resulting values.

Syntax Rules

• Wrapping: Expressions must be wrapped in curly braces, e.g., {SUM(field1, field2)}. If you provide a raw expression without braces, the service will automatically wrap it.
• Wildcards: The engine supports wildcard replacement to resolve paths relative to the current data context.
• Escaping: To use literal curly braces in a string, escape them using \{ and \}.

Example Usage

If you have a field that needs to display a sum of other fields:

{SUM(price, tax)}

If you need to check if a field is empty:

{NOT_EMPTY(username)}

To use Vueform, you call the default export function (the installer). This function returns a Vueform instance which you then use to install the library into your Vue application. You can pass an initial configuration object, custom components, validation rules, and custom services during initialization.

Arguments:

• config (Object): The base configuration for Vueform.
• components (Object): A map of custom components to register.
• rules (Object): Custom validation rules.
• services (Object): Custom service overrides (e.g., axios, validation).