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.



    "PackageSearch" mounts assets/vue/controllers/PackageSearch.vue.

    "packagesData" is dynamic data, which becomes the "packages" prop!

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


        <input v-model="search" />

        <div class="row">
            <a v-for="uxPackage in filteredPackages" :href="uxPackage.url">
                <img :src="uxPackage.imageUrl" />
                <h4>{{ uxPackage.humanName }}</h4>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
    packages: Array,

const search = ref('');

const filteredPackages = computed(() => {
    return props.packages.filter(
        uxPackage => uxPackage.humanName.includes(search.value)
Symfony logo

UX Vue.js


Install It

$ composer require ux symfony/ux-vue
$ npm install --force
$ npm run watch