FormKit OpenVue

formkit-openvue combines the OpenVue component framework with the validation power of Formkit in your Vue application.

The main motivation for this project is to use Formkit Validation by Schema with form elements provided by OpenVue.

Guide Overview

Navigate the guide to learn about all features and usage:

• Getting Started: How to install and set up FormKit OpenVue in your project.
• Form: Creating and managing forms with FormKit and OpenVue.
• Inputs: Overview and usage of input components.
• Outputs: Display and output components for showing data.
• Options: Working with options, selects, and dropdowns.
• Prefix: Using prefixes and suffixes in your form fields.
• Styling: Styling your forms and components, including advanced customization.
• Examples: Practical code examples and usage patterns.
• Usage: General usage tips and best practices.

Formkit Schema

Formkit Schema Documentation

INFO

FormKit's schema is a JSON-serializable data format for storing DOM structures and component implementations, including FormKit forms. Although created specifically for implementing and generating forms, the format is capable of generating any HTML markup or using any third-party components.

OpenVue inputs are prefixed with form and try to use as many properties as possible from their definition.

const schema = reactive(
  [
    {
      $el: 'h2',
      children: ['Register ', '$email'],
    },
    {
      $el: 'h3',
      children: 'Header Text H3',
    },
    {
      $formkit: 'formInputText',
      name: 'email',
      label: 'Email',
      help: 'This will be used for your account.',
      validation: 'required|email',
    },
    {
      $formkit: 'formTextarea',
      name: 'myText',
      label: 'Text',
      validation: '',
      rows: '3',
    }
  ]
)