How to pass an object with translation strings from symfony twig to a vue component

Question

I am using shopware (symfony twig) and got a small app from vue that i have to implement. I just want to pass an object with translated strings from the shop to use as the text in the component but i get only the object keys and the values are empty.

In the twig template I have:

{% set snippets = 
 {
 header: example.header|trans
 }
%}
<div id="app" snippet={{ snippets|json_encode() }}>
  <demo></demo>
</div>
<script>
 new Vue({
  components: {
   demo: Component
  }
 }).$mount('#app')
</script>

and in the vue component i got

 data() {
  let snippetSet = document.getElementById('app').getAttribute('snippet')
  return {
   snippet: snippetSet,
  }
 },
 mounted() {
  console.log(this.snippet);
 }

the output is {"header":""}

It is my first time using this stack so I am really thankful for any recommendation about how to reach my goal in maybe a different way.

Answer 1

You must pass a string to the trans function, right now you are trying to read a non existant variable.

This should work:

{% set snippets = 
 {
 header: "example.header"|trans
 }
%}