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

assets/svelte/controllers/PackageSearch.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>

templates/ux_packages/svelte.html.twig

{% 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

Install It

$ composer require symfony/ux-svelte