Appearance

VfContent ​

Basic Usage ​

VfContent renders static content inside the form — plain text, dynamic Expressions, raw HTML, or custom markup via its default slot — as the examples on this page demonstrate. It's a display-only element: it holds no value and adds nothing to the form data.

Please fill out the form below.
vue
<VfContent name="intro" content="Please fill out the form below." />
vue
<template>
  <VfContent name="intro" content="Please fill out the form below." />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  intro: {
    type: 'content',
    content: 'Please fill out the form below.',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Dynamic Content ​

The content prop supports expressions. Wrap element names or calculations in {...} to create dynamic text that updates reactively.

Hello, World!
vue
<VfText name="name" label="Name" default="World" />
<VfContent name="greeting" content="Hello, {name}!" />
vue
<template>
  <VfText name="name" label="Name" default="World" />
  <VfContent name="greeting" content="Hello, {name}!" />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  name: {
    type: 'text',
    label: 'Name',
    default: 'World',
  },
  greeting: {
    type: 'content',
    content: 'Hello, {name}!',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

HTML Content ​

Content containing markup renders as HTML by default — to restrict this or set up sanitization, see HTML sanitization.

This is bold and italic text.
vue
<VfContent
  name="notice"
  content="This is &lt;b&gt;bold&lt;/b&gt; and &lt;em&gt;italic&lt;/em&gt; text."
/>
vue
<template>
  <VfContent
    name="notice"
    content="This is &lt;b&gt;bold&lt;/b&gt; and &lt;em&gt;italic&lt;/em&gt; text."
  />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  notice: {
    type: 'content',
    content: 'This is <b>bold</b> and <em>italic</em> text.',
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Slot ​

Use the default slot to render custom content instead of the content prop.

Please read our terms and conditions before submitting.

vue
<VfContent name="notice">
  <template #default>
    <p>Please read our <a href="#">terms and conditions</a> before submitting.</p>
  </template>
</VfContent>
vue
<template>
  <VfContent name="notice">
    <template #default>
      <p>Please read our <a href="#">terms and conditions</a> before submitting.</p>
    </template>
  </VfContent>
</template>
vue
<script setup lang="ts">
import { defineSchema, defineSlot, useForm } from '@vueform/ui'
import { h } from 'vue'

const schema = defineSchema({
  notice: {
    type: 'content',
    slots: {
      default: defineSlot('VfContent.default', {
        setup() {
          return () => h('p', [
            'Please read our ',
            h('a', { href: '#' }, 'terms and conditions'),
            ' before submitting.',
          ])
        },
      }),
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Released under the MIT License.

Copyright © 2022-present Adam Berecz