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.

Rune Laenen · Accepted Answer · 2021-09-07 10:21:20Z

3

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
 }
%}

answered Sep 7, 2021 at 10:21

Rune Laenen

2931 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related