Vue.js Component Rendering
Built a Vue.js component? Render it quickly & easily in Twig and pass in dynamic props.
{% extends 'packageBase.html.twig' %}
{% block component_header %}
{% component PackageHeader with {
package: 'vue',
eyebrowText: 'Vue.js Component Rendering'
} %}
{% block title_header %}
Render Vue.js from
<span class="playfair ps-2">inside Twig</span>
{% endblock %}
{% block sub_content %}
Built a Vue.js component? Render it quickly & 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 %}
/*
| 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
$ composer require symfony/ux-vue
$ npm install --force
$ npm run watch