I'm working on a project using both of native JS and Svelte. And I worked on a Svelte ponent and I want to know how can I import this later into my JS file.

*index.js*
// js code here 
alert('here is my sweet Svelte poent');
-- the svelte ponent must be here ---
...
//

**MyComponent.svelte**

<script>
   ... the Svelte code ...
</script>
<style>
   ... the Svelte ponent's style ...
</style>
<div>
   ...
   ...
</div>

I'm working on a project using both of native JS and Svelte. And I worked on a Svelte ponent and I want to know how can I import this later into my JS file.

*index.js*
// js code here 
alert('here is my sweet Svelte poent');
-- the svelte ponent must be here ---
...
//

**MyComponent.svelte**

<script>
   ... the Svelte code ...
</script>
<style>
   ... the Svelte ponent's style ...
</style>
<div>
   ...
   ...
</div>

• javascript
• svelte
• rollup

Share Follow asked Oct 19, 2020 at 15:52 Elishah LMTElishah LMT 2311 silver badge33 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can simply do

import MyComponent from 'MyComponent.svelte'

to create an instance of it you would then do

new MyComponent({
  target: mountpoint // here the dom node where you want to mount it
})

If you are using JavaScript ES6 the syntax to import svelte and anything else is below:

const svelte = require('svelte')

And don't forget to update the rollup.config.js file by simply adding :

import svelte from "rollup-plugin-svelte";

and

svelte()

in the plugins' array like this :

plugin : [
svelte() 

]

With svelte 5.0, the way of mounting ponent into js has been changed. Now it looks like that:

import { mount } from "svelte";
mount(Component, {target: targetNode});