How to localize pivottable in a vue project

Hello,
 
Thank you for reaching out to us.
 
Please note that for a particular report, the localization property needs to be specified within the corresponding report object. Here is an example:

<template>
  <div>
    <Pivot
      ref="pivottable"
      v-bind:report="report"
    ></Pivot>
  </div>
</template>

...

data: function () {
  return {
    report: {
      "dataSource": {
        ...
      },
      "localization": "URL to the localization file"
    }
  }
}

 
To preset localization for all reports, set the localization property in the global object. Here is an example:

<template>
  <div>
    <Pivot
      ref="pivottable"
      v-bind:global="global"
    ></Pivot>
  </div>
</template>

...

data: function () {
  return {
    global: {
      "localization": "URL to the localization file"
    }
  }
}

 
Also, we want to draw your attention to the fact that Vue does not upload additional files of the project to the server (including localization JSON files). It means the local path can not be used in this case.
Instead, we suggest initializing the property with an inline JSON object taken from an appropriate localization file:

data: function () {
  return {
    global: {
      "localization": {
        "fieldsList": {
          "flatHierarchyBox": "选择和重排列",
          "hierarchyBox": "拖拽大小",
          "filterBox": "删除并重排报表筛选",
          ...
        }
      }
    }
  }
}

 
Another approach is to use our CDN as a localization provider:

data: function () {
  return {
    global: {
      "localization": "<https://cdn.flexmonster.com/loc/zh.json>"
    }
  }
}

 
More information about localizing Flexmonster can be found in our documentation.
 
Please let us know if it works for you.
Do not hesitate to contact us in case further questions arise.
 
Kind regards,
Illia