Components

Pruvious comes with several Vue components that you can utilize on your website or in custom dashboard pages.

PruviousPicture

The PruviousPicture component displays <picture> tags from image fields. It automatically renders all <source> tags defined in the image field. Here's an example of how to use it:

# blocks/Picture.vue

<template>
  <PruviousPicture :image="image" />
</template>

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

defineProps({
  image: imageField({ sources: [...] }),
})
</script>

You can also specify the lazy and imgAttrs props in the component to determine if the image will be lazy loaded and to forward attributes to the <img> tag.

The component has a default slot where the <img> tag is rendered by default.

PruviousImage

The PruviousImage component can be used to display <img> tags or combined with the PruviousPicture component for better control over the element. Here's an example:

# blocks/Image.vue

<template>
  <PruviousPicture :image="image">
    <PruviousImage :image="image" :class="{ ... }" />
  </PruviousPicture>
</template>

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

defineProps({
  image: imageField({ sources: [...] }),
})
</script>

PruviousHTML

The PruviousHTML component displays HTML content and modifies the behavior of local links by using the Vue router instead of the default browser behavior. Here's an example of how to use it:

# blocks/Content.vue

<template>
  <PruviousHTML :html="content" />
</template>

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

defineProps({
  content: editorField(),
})
</script>

PruviousIcon

The PruviousIcon component dynamically displays an icon from the icons directory in the project's root. It can be used in combination with the icon field. Here's an example of how to use it:

# blocks/Icon.vue

<template>
  <PruviousIcon :icon="icon" />
</template>

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

defineProps({
  icon: iconField(),
})
</script>

Field components

All defined fields in the dashboard have their own components. You can import these components from the #pruvious/dashboard handle and use them as needed. Here's an example of how to use the text field component:

# components/Dashboard/Email.vue

<template>
  <div>
    <component
      v-model="email"
      :is="TextField"
      :options="{
        label: 'Email',
        type: 'email',
        autocomplete: 'email',
      }"
      fieldKey="email"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from '#imports'
import { textFieldComponent } from '#pruvious/dashboard'

const TextField = textFieldComponent()
const email = ref('')
</script>

Field components are highly effective for creating custom dashboard pages. They are loaded dynamically and have the following props (required props are marked with the R symbol):