Dynamically loading component using import or fetch

Question

Is there a way to import components in svelte dynamically using fetch or import? May be a svelte file or module file created from shareable component (still don't know how that works). very new with svelte and very excited.

I found some code in stackoverflow, which worked for v2. Here is the link


<button on:click="loadChatbox()">
  chat to a customer service representative
</button>

{#if ChatBox}
  <svelte:component this={ChatBox}/>
{/if}

<script>
  export default {
    methods: {
      async loadChatbox() {
        const { default: Chatbox } = await import('./Chatbox.html');
        this.set({ Chatbox });
      }
    }
  };
</script>

Tholle · Accepted Answer · 2019-06-06 13:54:43Z

19

The same functionality exists in Svelte 3, but you only need to assign the dynamically imported component to a regular variable that you use for the this property on the svelte:component.

Example (REPL)

<!-- App.svelte -->
<script>
  let Chatbox;

  function loadChatbox() {
    import('./ChatBox.svelte').then(res => Chatbox = res.default)
  }
</script>

<button on:click="{loadChatbox}">Load chatbox</button>
<svelte:component this="{Chatbox}" />

<!-- ChatBox.svelte -->
<h1>Dynamically loaded chatbox</h1>
<input />

edited Jun 6, 2019 at 13:54

answered Jun 4, 2019 at 7:18

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

3 Comments

ssuwal Over a year ago

Great, this works. I tried it in the repl and it works as it suppose to but the rollup build fails while doing locally using the sveltejs/template. With the help of this I was also able to load external mjs in runtime to load components. Here are the related project main project, component generator and module server. I had to switch to mjs since import didn't like svelte or html served from server.

Andrew Mao Over a year ago

What do you have to do to get rollup to put the components in the build output?

Rob B Over a year ago

@AndrewMao inlineDynamicImports

Collectives™ on Stack Overflow

Dynamically loading component using import or fetch

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related