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!

up vote 1 down vote accepted

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 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 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 at 14:28
  • 1
    That'll be present for Vue in the next release, found that issue yesterday :) – Kam Figy May 24 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 at 14:29

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.