Vue.js | Symfony UX Components

templates/vue.html.twig

{#
    "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>
</div>

assets/vue/controllers/PackageSearch.vue

<template>
    <div>
        <input v-model="search" />

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

<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)
    );
});
</script>

Render Vue.js from inside Twig

Install It