Field helper components provided by JSS for Vue.js

Version: 22.x

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, 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.

Text

RequestResponse

<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.

RichText

RequestResponse

<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`

Image

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.

RequestResponse

<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 to add to the image URL. Note Because JSS does not support security hashing of media URLs, these parameter sets must be white-listed on the server.	-

Link

RequestResponse

<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. Note 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. Note 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.

File

RequestResponse

<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.

Date

RequestResponse

<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.	-

Do you have some feedback for us?

If you have suggestions for improving this article,