How to compile Twig in a Vue component? Please help :)

[wwwd3v]

Hi. We are building a heavily-hybrid app, and large chunkes of content come from TWIG.

An example of it might look like this right now:

<custom-form inline-template>
  {% for user in users %}
    <label>{{ 'label'|trans({'name': user.name}) }}</label>
    <input v-model="payload[{{ user.id }}]">
  {% endfor %}
</custom-form>

We are at the stage when actually, doing props+serialization adds maintainability difficulties over decoupling benefits (it is not worth maintaing multiple translation layers between our server and client renderers).

However, now the problem is: I have to go to a completely different file (CustomForm.vue) in order to maintain the scripts:

<script>
export default {
  data() {
    return {
      payload: {},
    };
  },
};
</endscript>

How could I solve this?

What I can think of:

1. move the scripts into the TWIG file
2. move the TWIG into the Vue template file

However, I cannot quite execute it either way.

The problem with 1. is that I am transpiling JS through BABEL, so I would need Babel to somehow compile the JS inside a <script> tag in a twig file.

Could 2. be somehow achieved? Somehow configure a TWIG loader for webpack to precompile?

Thank you for your answers.

[mertingen]

@wwwd3v As I got, you're able to render the Twig file by an endpoint. Then, rendered data are returned by Symfony the following.

Have you checked here, that might be similar case.

[Kocal]

If you really want to compile Twig code in your Vue components, you can use the Twing library 😛