UI components in the JSS Vue.js sample app

The JSS Vue sample application primarily uses Single-File Components (SFC) for presentational components, but you can use any component declaration and registration method supported by Vue.js, such as render functions, inline template properties, and so on.

Components in a JSS for Vue.js application differ from regular Vue.js components in that they are stateless functional components and are dynamically added inside a Placeholder component, which provides them with an ambient fields prop.

The following is an example of a Vue component definition in a JSS application:

<template>
  <div>
    <sc-text :field="fields.title" />
  </div>
</template>

<script>
import { Text } from '@sitecore-jss/sitecore-jss-vue';
export default {
  name: 'MyComponent',
  props: {
    fields: {
      type: Object,
    },
  },
  components: {
    ScText: Text,
  },
};
</script>

To help with the rendering of Sitecore fields, the Sitecore JavaScript Rendering SDK (JSS) for Vue.js provides field helper components.