---
title: "Field helper components provided by JSS for Vue.js"
slug: "field-helper-components-provided-by-jss-for-vue-js"
abstract: "Describes components provided by JSS for Vue.js to assist with rendering Sitecore data."
---
# Field helper components provided by JSS for Vue.js

JSS for Vue.js provides helper components to help render Sitecore field values.

The helper components exposed from `sitecore-jss-vue` are stateless functional components except for `Placeholder`, a typically stateful component.

In accordance with [attribute inheritance in Vue.js](https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance), any non-property attributes passed to the component are rendered as HTML attributes on the enclosing tag. Events passed to the component are also propagated.

> [!note]
> None of the helper components exposed from `sitecore-jss-vue` are registered globally using methods such as `app.component()`. This is intentional so as not to pollute the global component space and also to align with the tree-shaking capabilities of bundling tools like Webpack or Rollup. Therefore, you must locally require/import any of the helper components you want to use in your own components.

The following is a list of all supported field helper components with examples on how to use them. In the following examples, field data is provided by a placeholder component.

<details>
<summary><h2>Text</h2></summary>

```csharp
<template>
  <sc-text tag="h1" :field="fields.title" />
</template>
<script>
import { Text } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScText: Text
  }
};
</script>

```

The following table describes the input properties:

| Name | Description | Default |
| --- | --- | --- |
| `field` | The field you want to render. Usually one of the Sitecore field types Single-Line Text or Multi-Line Text, but you can be used numeric types too. | - |
| `tag` | The name of the HTML element to wrap the text value. | `span` |
| `editable` | Indicates whether to use the editor or Sitecore-formatted HTML output. | `true` |
| `encode` | Enables or disables HTML encoding of the output value. A false value also implies `editable: false`. | `true` |

For Multi-line Text, in the provided editable value, any line breaks are replaced by `<br />`. If using the non-editable value, you can process `field.value` to replace JSON newlines with the desired markup or use a CSS white-space value such as pre-wrap.

</details>

<details>
<summary><h2>RichText</h2></summary>

```csharp
<template>
  <sc-rich-text tag="div" :field="fields.text" />
</template>
<script>
import { RichText } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScRichText: RichText
  }
};
</script>

```

The following table describes the input properties:

| Name | Description | Default |
| --- | --- | --- |
| `field` | The field you want to render. Must be a Sitecore Rich Text type. | - |
| `tag` | The HTML element name wrapping the rich text value. | `div` |
| `editable` | Indicates whether to use the editor or Sitecore-formatted HTML output. | `true` |

</details>

<details>
<summary><h2>Image</h2></summary>

The Image component gives special treatment to the `srcSet` attribute if provided as an attribute on the component. You can provide an array of objects which represent query string parameters for each element of a `srcSet`. This enables responsive images with server-side rendering when combined with the `sizes` property.

```csharp
<template>
  <sc-image :media="fields.image" />
</template>
<script>
import { Image } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScImage: Image
  }
};
</script>

```

The following table describes the input properties:

| Name | Description | Default |
| --- | --- | --- |
| `media` | The route field you want to render. Must be a Sitecore Image type. | - |
| `editable` | Indicates whether the Sitecore-formatted output must be used. | `true` |
| `imageParams` | The [query string parameters](https://community.sitecore.net/technical_blogs/b/sitecorejohn_blog/posts/media-options-and-query-string-parameters-in-the-sitecore-asp-net-cms) to add to the image URL.<br><br>> [!note]<br>> Because JSS does not support security hashing of media URLs, these parameter sets must be [white-listed on the server](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/media-handler.html). | - |

</details>

<details>
<summary><h2>Link</h2></summary>

```csharp
<template>
  <sc-link :field="fields.link" />
</template>
<script>
import { Link } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScLink: Link
  }
};
</script>

```

The following table describes the input properties:

| Name | Description | Default |
| --- | --- | --- |
| `field` | The route field you want to render. Must be a Sitecore General Link type. | - |
| `editable` | Indicates whether to use the editor or Sitecore-formatted HTML output.<br><br>> [!note]<br>> If using editable output from Sitecore, Link creates a wrapper span around the Sitecore-provided markup, and applies host element attributes to this span. | `true` |
| `showLinkTextWithChildrenPresent` | A Boolean expression that enables or disables the display of a link description even when children exist.<br><br>> [!note]<br>> This setting is ignored in the Sitecore Experience Editor due to technical limitations, and the description is always rendered. |  |

> [!note]
> In the Experience Editor, in editor mode, a link description is always rendered. If the link has any children, they are rendered as siblings to the link description.

</details>

<details>
<summary><h2>File</h2></summary>

```csharp
<template>
  <sc-file :field="fields.file" />
</template>
<script>
import { File } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScFile: File
  }
};
</script>

```

The following table describes the input properties:

| Name | Description |
| --- | --- |
| `field` | The route field you want to render. Must be a Sitecore File type. |

> [!important]
> The File field does not support inline editing with the Experience Editor in Sitecore, but it can be edited using the default field editor on components.

</details>

<details>
<summary><h2>Date</h2></summary>

```csharp
<template>
  <sc-date :field="fields.date" :formatter="formatDate" />
</template>
<script>
import { Date } from '@sitecore-jss/sitecore-jss-vue';
export default {
  props: {
    fields: Object
  }
  components: {
    ScDate: Date
  },
  methods: {
    formatDate(date) {
      return date && date.toISOString();
    }
  }
};
</script>

```

The following table describes the input properties:

| Name | Description | Default |
| --- | --- | --- |
| `field` | The field you want to render. Must be a Sitecore Date type. | - |
| `tag` | The name of the HTML element wrapping the date value. | `span` |
| `editable` | Indicates whether the Experience Editor/Sitecore-formatted HTML output must be used. | `true` |
| `formatter` | A function that receives the field value as a parsed JavaScript Date object and returns the value to render in the wrapping `tag` of the component. | - |

</details>