Svelte Component Rendering
Render Svelte from inside Twig
Built a Svelte component? Render it quickly & easily in Twig and pass in dynamic props.
composer require symfony/ux-svelte
<script>
import PackageList from '../components/PackageList.js';
export let packages = [];
let search = '';
$: filteredPackages = packages.filter(
uxPackage => uxPackage.humanName.toLowerCase().includes(search.toLowerCase())
);
</script>
<div>
<input
bind:value={search}
class='form-control'
type='search'
placeholder='This search is built in Svelte!'
/>
<div class='mt-3'>
<PackageList packages={filteredPackages} />
</div>
</div>
{% extends 'base.html.twig' %}
{% block body %}
<div {{ svelte_component('PackageSearch', {
packages: packagesData,
}) }}>
Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
</div>
{% endblock %}
UX Svelte
Loading...
Install It
$ composer require symfony/ux-svelte