CODEWITHSUNDEEP
javascriptsveltesvelte-component
Extrange planet
Extrange planet

Reputation: 278

How to import multiple components to main.js in svelte js?

How could import an svelte component to a "target" different to body?

https://github.com/sveltejs/template/blob/master/src/main.js

I am trying the next:

import App from './App.svelte';
export default new App({ target: document.body.div});

How could I export multiple componentes to different targets?

import App1 from './App1.svelte';
import App2 from './App2.svelte';
export default new App1({ target: document.body.div1});   
export default new App2({ target: document.body.div2});

Upvotes: 0

Views: 1896

Answers (2)

CD..
CD..

Reputation: 74096

You can use named exports, like:

import App1 from './App1.svelte';
import App2 from './App2.svelte';

export const app1 = new App1({ target: document.getElementById("app1")});   
export const app2 = new App2({ target: document.getElementById("app2")});

And in Your html you need to have the following elements:

<div id="app1"></div>
<div id="app2"></div>

Upvotes: 1

JTCon
JTCon

Reputation: 509

You can export a "const" object instead "default" to html element #ids with document.getElementById() or body tag names with document.getElementsByTagName()

import App1 from './App1.svelte';
import App2 from './App2.svelte';

export const app1 = new App1({ target: document.getElementById("div1") });   
export const app2 = new App2({ target: document.getElementById("div2") });

Upvotes: 1

Related Questions