Vue.js pass some translations into a component

In the parent page create a javascript variable and set the values server-side

e.g.

<br />
&lt;script&gt;<br />
var translations = { Edit: &quot;@ViewBag.EditTranslation&quot;, Select: &quot;@ViewBag.SelectTranslation&quot; };<br />
&lt;/script&gt;<br />

ViewBag is only used here for illustration.

In the component define translations as a prop, specifying it’s type as Object. I’ve kept the other prop “rows” to show how multiple props are specified.

<br />
Vue.component('my-component', {<br />
props: { rows: Array, translations: Object }<br />
...<br />

In the component template use them like

<br />
{{ translations.Select }}<br />

Or as attributes like

<br />
&lt;i class=&quot;far fa-edit fa-sm&quot; v-bind:title=&quot;translations.Edit&quot;&gt;&lt;/i&gt;<br />

Then on the parent viewmodel pull the javascript data in.

<br />
var vmParent = new Vue({<br />
data: {<br />
translations: translations<br />
},<br />
...<br />

Then in the parent page bind the translations to the instance of the component

<br />
&lt;my-component v-bind:translations=&quot;translations&quot;&gt;&lt;/my-component&gt;<br />