How to Use Dynamic Component in Svelte: Simple Guide

In Svelte, you can use the svelte:component tag with a this attribute to render a dynamic component based on a variable. Assign the component you want to display to a variable and pass it to svelte:component this={variable} to switch components dynamically.

Syntax

The svelte:component tag lets you render a component dynamically. Use the this attribute to specify which component to show. You assign a component to a variable and pass it to this.

Example parts:

• <svelte:component this={ComponentVariable} />: renders the component stored in ComponentVariable.
• ComponentVariable: a variable holding a Svelte component reference.

svelte

<script>
  import ComponentA from './ComponentA.svelte';
  import ComponentB from './ComponentB.svelte';

  let currentComponent = ComponentA;
</script>

<svelte:component this={currentComponent} />

Output

Renders the UI of ComponentA initially.

Example

This example shows how to switch between two components dynamically using buttons. Clicking a button changes the variable, and the displayed component updates automatically.

svelte

<script>
  import RedBox from './RedBox.svelte';
  import BlueBox from './BlueBox.svelte';

  let activeComponent = RedBox;

  function showRed() {
    activeComponent = RedBox;
  }

  function showBlue() {
    activeComponent = BlueBox;
  }
</script>

<button on:click={showRed}>Show Red Box</button>
<button on:click={showBlue}>Show Blue Box</button>

<svelte:component this={activeComponent} />

<!-- RedBox.svelte -->
<!-- <div style="width:100px; height:100px; background-color:red;"></div> -->

<!-- BlueBox.svelte -->
<!-- <div style="width:100px; height:100px; background-color:blue;"></div> -->

Output

Initially shows a red square box. Clicking 'Show Blue Box' changes it to a blue square box.

Common Pitfalls

Common mistakes when using dynamic components in Svelte include:

• Not importing the components before assigning them to the variable.
• Passing a string with the component name instead of the component itself.
• Forgetting to update the variable to trigger re-render.

Always assign the actual component (imported) to the variable, not a string.

svelte

<script>
  import CompA from './CompA.svelte';
  import CompB from './CompB.svelte';

  // Wrong: using string instead of component
  let current = 'CompA';

  // Right:
  // let current = CompA;
</script>

<svelte:component this={current} />

Output

Error or blank output because 'current' is a string, not a component reference.

Quick Reference

Tips for using dynamic components in Svelte:

• Use svelte:component with this to render dynamic components.
• Assign imported components to variables, not strings.
• Update the variable to switch components dynamically.
• You can pass props to dynamic components like normal components.

Key Takeaways

Use svelte:component this={variable} to render dynamic components in Svelte.

Assign actual imported components to variables, never strings with component names.

Change the variable to switch which component is displayed dynamically.

You can pass props to dynamic components just like normal components.

Always import components before using them dynamically to avoid errors.