How can I share data from one component in JSS with Vue Js?

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

<template>
</template>

<script>
import { Link } from '@sitecore-jss/sitecore-jss-vue';

export default {
props: {
fields: {
type: Object,
default: () => ({}),
}
},
data:  function () {
return {}
},
components: {
}
};
</script>

<style>

</style>


to use data from

{
"fields": {
"value": {
"href": "/services",
"title": "Services",
"text": "Services"
}
}
}
}


data/routes/en.json

{
"name": "services",
"displayName": "Services",
"placeholders": {
"main": [
{
"fields": {
"value": {
"href": "/services",
"title": "Services",
"text": "Services"
}
}
}
}
]
}
}


Thanks!

You can do this using ID references introduced in technical preview 3.

Essentially, you define a shared piece of component content under /data/component-content, give it an explicit, app-wide-unique id value, and then refer to it from a route to include the shared reference.

The Angular Basic app has an example of doing this here. It is using YAML instead of JSON for its route data, but the equivalent JSON structure also works.

Note that ID references work at a component level, but not a route level. So while you can share a single piece of lorem ipsum component content throughout the app if you wish, you cannot literally re-route the same route to a different shared route. If you wanted to do some route rewriting behavior, you'd need to implement your custom logic in /sitecore/definitions/routes.sitecore.js, which is where all the YAML/JSON files are parsed into the manifest.

Note: for Vue in TP3, you'll also need to borrow the missing /sitecore/definitions/component-content.sitecore.js file from here to get component-content to build into the manifest. This will not be necessary for versions after technical preview 3.

• Hi @kam-Figy, 1- I renamed my folder to /data/ component-content /Header-nav/ 2- I added an ID: "id": "ID__header-nav", 3 - I made a reference to that ID (same as The Angular Basic app) 4 - I have this error: The item ID ID__header-nav was referred to, but it was not defined! I think we need one more step. Thanks – tomagladiator May 24 '18 at 14:09
• Are your component-content items being added to the manifest? (i.e. does /sitecore/definitions/component-content.sitecore.js exist) – Kam Figy May 24 '18 at 14:28
• I find the last step : Add a new file : sitecore\definitions\component-content.sitecore.js same as github.com/Sitecore/jss/blob/… – tomagladiator May 24 '18 at 14:28
• That'll be present for Vue in the next release, found that issue yesterday :) – Kam Figy May 24 '18 at 14:29
• Thanks Kam, this file was missing, can you edit your answer to add this last step ? And I will Approve it ! – tomagladiator May 24 '18 at 14:29