1

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!

1 Answer 1

1

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.

5
  • 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 May 24, 2018 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, 2018 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/… May 24, 2018 at 14:28
  • 1
    That'll be present for Vue in the next release, found that issue yesterday :)
    – Kam Figy
    May 24, 2018 at 14:29
  • Thanks Kam, this file was missing, can you edit your answer to add this last step ? And I will Approve it ! May 24, 2018 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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