Vue.js pass some translations into a component

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

e.g.

<script>
var translations = { Edit: "@ViewBag.EditTranslation", Select: "@ViewBag.SelectTranslation" };
</script>

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.

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

In the component template use them like

{{ translations.Select }}

Or as attributes like

<i class="far fa-edit fa-sm" v-bind:title="translations.Edit"></i>

Then on the parent viewmodel pull the javascript data in.

var vmParent = new Vue({
data: {
translations: translations
},
...

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

<my-component v-bind:translations="translations"></my-component>