Output Components

formkit-openvue can also be used to output data.

Different types of data can be handled.

WARNING

Some outputs depend on vue-i18n e.g. OutputNumber or OutputDate.

numberFormats / datetimeFormats from vue-i18n are used to display the values accordingly to the selected format.

Examples

OutputNumber

const formkitItem = {
  $formkit: 'formOutputNumber',
  name: 'number',
  format: 'decimal', // vue-i18n format
}

Naming in FormKit

Outputs are used in schema with form as prefix and the output name as suffix.

E.g. OutputText -> formOutputText

Supported Outputs

Below is a list of all supported OpenVue output components. Click on a component name to view its full documentation and usage examples. For live examples, see the OpenVue Outputs Demo.

• FormOutputBoolean (Live Example)
• FormOutputDate (Live Example)
• FormOutputDuration (Live Example)
• FormOutputLink (Live Example)
• FormOutputList (Live Example)
• FormOutputNumber (Live Example)
• FormOutputReference (Live Example)
• FormOutputText (Live Example)