Dynamic component import in svelteJS

Question

I am using SvelteJs with svelte-spa-router.

I have my cases where I do

<script>
import Component1 from './Component1.svelte'
import Component2 from './Component2.svelte'
</script>

    {#if condition}
       <Component1 {...props1} />
    {:else}
       <Component2  {...props2} />
    {/if}

Is there a better way I can do this? Can I dynamically import and render components only when condition is met?

Ryuman · Accepted Answer · 2021-05-01 05:11:23Z

5

I think what you need to do is called "Lazy loading" which is loading the component only when it needs to be rendered.

This concept can be used in svelte, you only need the <svelte:component /> and import('') function

// Component.svelte
<div>
    Hello world
</div>

let's import that component dynamically

<script>
    export let props = {}
    export let condition = false
</script>

{#await import('./Component.svelte') then value }
    <svelte:component this={value.default} {...props} />
{/await}

let's add a condition

{#if condition}
  {#await import('./Component.svelte') then value }
        <svelte:component this={value.default} {...props} />
    {/await}
{/if}

Now the component will get imported only if the condition is met

you check this REPL

answered May 1, 2021 at 5:11

Ryuman

1,0476 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CodeCodeCodon Over a year ago

Exactly the solution I was about to post. Thank's for the help!

Damiano Mazzara Over a year ago

Is there a way to do this using svelte static adapter for build?

Collectives™ on Stack Overflow

Dynamic component import in svelteJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related