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

Read the docs

assets/svelte/src/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... </div> {% endblock %}

UX Svelte

Install It

$ composer require symfony/ux-svelte