vue.html.twig

{% extends 'ux_packages/package.html.twig' %}

{% block importmap %}
    {{ importmap('app-vue') }}
{% endblock %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'vue',
        eyebrowText: 'Vue.js Component Rendering'
    } %}
        {% block title_header %}
            Render Vue.js from <em>inside Twig</em>
        {% endblock %}

        {% block sub_content %}
            Built a Vue.js component? Render it quickly &amp; easily in Twig <em>and</em> pass in dynamic props.
        {% endblock %}
    {% endcomponent %}
{% endblock %}

{% block code_block_left %}
    <twig:CodeBlock filename="assets/vue/controllers/PackageSearch.js" height="300px" />
{% endblock %}

{% block code_block_right %}
    <twig:CodeBlock
        filename="templates/ux_packages/vue.html.twig"
        height="300px"
        language="html"
        targetTwigBlock="demo_content"
    />
{% endblock %}

{% block demo_title %}UX Vue.js{% endblock %}

{% block demo_content %}
    <div {{ vue_component('PackageSearch', {packages: packagesData}) }}>
        Loading...
    </div>
{% endblock %}