---
title: "JSS Vue.jsサンプルアプリのコンポーネントUI"
slug: "ui-components-in-the-jss-vue-js-sample-app"
abstract: "Vue.jsで構築されたアプリケーションにおけるコンポーネントの動作を説明JSS"
---
# JSS Vue.jsサンプルアプリのコンポーネントUI

JSS Vueのサンプルアプリケーションは主にプレゼンテーションコンポーネントにシングルファイルコンポーネント(SFC)を使用しますが、レンダリング関数やインラインテンプレートプロパティなど、Vue.jsがサポートする任意のコンポーネント宣言や登録方法を利用できます。

Vue.jsアプリケーション用のJSSコンポーネントは、通常のVue.jsコンポーネントとは異なり、ステートレス関数コンポーネントであり、プレースホルダーコンポーネント内に動的に追加されるため、環境フィールドプロップが付与されます。

以下はJSSアプリケーションにおけるVueコンポーネント定義の例です:

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

Sitecoreフィールドのレンダリングを支援するために、Vue.js用のSitecore JavaScriptレンダリングSDK(JSS)は [フィールドヘルパーコンポーネント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/field-helper-components-provided-by-jss-for-vue-js.html "Field helper components provided by JSS for Vue.js")を提供します。