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>
UX Vue
Loading...
Install It
$ composer require ux symfony/ux-vue
$ npm install --force
$ npm run watch