Vue.js Component Rendering

Render Vue.js from inside Twig

Built a Vue.js component? Render it quickly & easily in Twig and pass in dynamic props.

composer require symfony/ux-vue

templates/ux_packages/vue.html.twig

{% extends 'packageBase.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="templates/ux_packages/vue.html.twig" height="350px"/>
{% endblock %}

{% block code_block_right %}
    <twig:CodeBlock
        filename="assets/vue/controllers/PackageSearch.js"
        height="350px"
        language="html"
    />
{% endblock %}

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

{% block demo_content %}
    <div {{ vue_component('PackageSearch', {
        packages: packagesData
    }) }}>
        Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
    </div>
{% endblock %}

assets/vue/controllers/PackageSearch.js

/*
 |  Single-File Components - e.g. PackageSearch.vue -
 |  are supported when using Webpack Encore.
 */
import { ref, computed } from 'vue';
import PackageList from "../components/PackageList.js";

export default {
    components: {
        PackageList
    },
    props: ['packages'],
    setup(props) {
        const search = ref('');

        const filteredPackages = computed(() => {
            return props.packages.filter(
                uxPackage => uxPackage.humanName.toLowerCase().includes(search.value.toLowerCase())
            );
        });

        return {
            search,
            filteredPackages
        }
    },
    template: `
        <div>
            <input
                v-model="search"
                class="form-control"
                type="search"
                placeholder="This search is built in Vue.js!"
            />

            <div class="mt-3">
                <PackageList :packages="filteredPackages" />
            </div>
        </div>
    `
};

UX Vue.js

Install It

$ composer require symfony/ux-vue