On this page

Link field

The link field stores links to page-like collections or external links.

Link field


Here's an example of using the link field in a block:

# blocks/Logo.vue

  <NuxtLink :to="homepageLink">

<script lang="ts" setup>
import { linkField } from '#pruvious'

  homepageLink: linkField({
    required: true,
    placeholder: 'Select a page',

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    relatedProduct: {
      type: 'link',
      options: {
        required: true,
        placeholder: 'Select a page',
    // ...


You can specify the following options in the link field:



The default field value (an empty string if not defined).


A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.


The field label displayed in the UI. By default, it is automatically generated based on the property name assigned to the field. For example, landingPage becomes Landing page.


A string that specifies the name for the input control, influencing autocomplete behavior in some browsers. If not specified, the name attribute will be automatically generated.


Text that appears in the input element when it has no value set.


Specifies that the field input is mandatory during creation.


The number of visible link choices in the dropdown list (must be less than 30).

Last updated on January 8, 2024 at 19:21