As a developer,
I want to change data from a component in ONE place,
so that I don't need to duplicate this data for each pages
How can I ask to my
src/app/components/header-nav.vue
<template>
<sc-link :field="fields.link" />
</template>
<script>
import { Link } from '@sitecore-jss/sitecore-jss-vue';
export default {
name: 'HeaderNav',
props: {
fields: {
type: Object,
default: () => ({}),
}
},
data: function () {
return {}
},
components: {
ScLink: Link,
}
};
</script>
<style>
</style>
to use data from
data/components/header-nav/en.json
{
"name": "Header Nav",
"componentName": "HeaderNav",
"fields": {
"link": {
"value": {
"href": "/services",
"title": "Services",
"text": "Services"
}
}
}
}
instead of
data/routes/en.json
{
"name": "services",
"displayName": "Services",
"placeholders": {
"main": [
{
"componentName": "HeaderNav",
"fields": {
"link": {
"value": {
"href": "/services",
"title": "Services",
"text": "Services"
}
}
}
}
]
}
}
Thanks!