[FIXED] how to use twig in vue

Issue

i have simple modal window plan.vue with slot

            ...
            <div class="plan__content">
                <slot></slot>
            </div>
           ...

there is also example.vue where it is used

                        <button
                            @click="showPlan"
                        >
                            Show plan
                        </button>
                        <plan
                            v-if="isPlanVisible"
                            @closePlan="closePlan"
                        >
                        </plan>

and i also have twig file plan.html.twig

{% block field %}
    <table id="plan_table">
      <caption>
        <h2> {{smth.name}} </h2>
      </caption>
    ...
    </table>

{% endblock %}

can i add my twig here <plan> </plan> somehow? I tried to find a solution but only found how to add vue to twig and not vice versa

Solution

You can not embed a twig file inside a Vue component and render it. You have two alternative options:

1. You implement you twig template in "Vue Code" and don't use the twig template at all.
2. You load the rendered twig template via HTTP Request from a backend endpoint and render the response inside you Vue component vie v-html attribute for example.

Answered By - Darius Mann