Skip to content

PrimeOutputReference

A FormKit wrapper for PrimeVue's OutputReference component.

Live Example on Website

Usage

vue
<FormKit type="primeoutputreference" v-model="reference" />

Object-based Example

vue
<script setup>
const schema = [
  { $formkit: 'primeOutputReference', name: 'externalId', label: 'External Link', reference: 'https://github.com/sfxcode/{{value}}' },
  { $formkit: 'primeOutputReference', name: 'externalValue', label: 'External Link with custom title', title: 'Show on GitHub', reference: 'https://github.com/sfxcode/{{valueNameNotImportant}}' },
  { $formkit: 'primeOutputReference', name: 'internalLink', label: 'Internal Link', internal: true, reference: '/outputs/{{value}}' },
  { $formkit: 'primeOutputReference', name: 'internalLink', label: 'Internal Link with custom title', internal: true, title: 'Show: {{value}}', reference: '/outputs/{{value}}' },
]
const data = { externalId: 42, externalValue: 'formkit-primevue', internalLink: 'outputLink' }
</script>

<template>
  <FormKit :schema="schema" :data="data" />
</template>

Props

NameTypeDescription
referencestringReference URL or path
titlestringLink title
internalbooleanUse internal router link
iconPrefixstringIcon for prefix
iconSuffixstringIcon for suffix
prefixstringPrefix text
suffixstringSuffix text
......See PrimeOutputReference source for all props

See PrimeOutputReference source for more details.

FormKit PrimeVue Module