Symfony/vue - how to passe data from controller to vue - symfony

Question

I'm using Symfony 5 / twig with webpack.encore and vue.js.
I passing datas (translation texts) to the used twig-template like this:
Controller:
class HomepageController extends AbstractController
{
const PAGE_ID = 2; // constants PageId
/**
* #Route("{_locale}/homepage", name="app_homepage")
*
*/
public function index(Request $request,SpracheRepository $spracheRepository)
{
$arrTrans = $spracheRepository->findAllOfSpecificPage(self::PAGE_ID,$request->getLocale());
return $this->render('core/homepage/homepage.html.twig', [
'headline' => $arrTrans['lb_overview'],
'pageId' => self::PAGE_ID,
'arrTrans' => $arrTrans
]);
}
}
...and I'd like to access the datas "arrTrans" in the vue file.
The html.twig is looking like:
{% block content %}
<div id="app"></div>
{% endblock %}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('homepage') }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('homepage') }}
{% endblock %}
The corsponding .js file:
import Vue from 'vue';
import App from '../vue/homepage'
new Vue({
render: (h) => h(App),
}).$mount('#app');
...and the vue file themselfe: (I'd like to use the arrTrans in the div of the "button-overview-lable")
<template>
<div class="button-overview">
<div class="button-overview-lable">{{ arrTrans['lb_planning'] }}</div>
</a>
</div>
</template>
<script>
export default {
name: "Homepage",
}
</script>
<style lang="scss">
#import "../../../core/app/css/helper/variables";
#import "../css/homepage";
</style>

Answer 1

If you need to pass data from your template file to a javascript file you can use data attribute.
<div id="app" data-trans="{{ arrTrans | json_encode() }}"></div>
new Vue({
el: '#app',
data: {
trans: null
},
mounted: function() {
this.trans = this.$el.getAttribute('data-trans');
}
});

Answer 2

You can create a JS variable in twig template and pass json-encoded array. Like this (also we disable automatic html-escaping using raw filter):
{% block content %}
<script>
const arrTrans = JSON.parse('{{ arrTrans|json_encode()|raw }}')
</script>
<div id="app"></div>
{% endblock %}
But you have to deal with ' character in your locale strings because it will cause JS syntax error. Replace raw filter with escape('js').
So, the final twig template is:
{% block content %}
<script>
const arrTrans = JSON.parse('{{ arrTrans|json_encode()|escape('js') }}')
</script>
<div id="app"></div>
{% endblock %}
Then in vue app you will just use this variable in data:
<template>
<div class="button-overview">
<div class="button-overview-lable">{{ arrTrans.lb_planning }}</div>
</a>
</div>
</template>
<script>
export default {
name: 'Homepage',
data() {
return {
arrTrans,
};
},
};
</script>
<style lang="scss">
#import "../../../core/app/css/helper/variables";
#import "../css/homepage";
</style>

Answer 3

Thanks for the answers, but I had some problems to implement them. What's now working for me was:
Homepage.html.twig
<div ref="translation" data-translation="{{ arrTrans|json_encode() }}"></div>
Homepage.js
new Vue({
el: '#app',
render: (h) => h(App),
})
homepage.vue
<template>
<div>
<div>{{ trans }}</div>
<div>{{ trans['lb_planning'] }}</div>
</div>
</template>
export default {
name: 'HomePage',
data() {
return {
trans: {}
};
},
mounted() {
let elTrans = document.querySelector("div[data-translation]");
let myTrans = JSON.parse(elTrans.dataset.translation);
this.trans= myTrans;
}
}