CODEWITHSUNDEEP
javascriptsvelterollup
Elishah LMT
Elishah LMT

Reputation: 23

How to import a Svelte component into a JS file

I'm working on a project using both of native JS and Svelte. And I worked on a Svelte component 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 compoent');
-- the svelte component must be here ---
...
//

**MyComponent.svelte**

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

Upvotes: 2

Views: 2836

Answers (4)

bugthefifth
bugthefifth

Reputation: 169

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

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

Upvotes: 0

Elishah LMT
Elishah LMT

Reputation: 23

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()

]

Upvotes: 0

Stephane Vanraes
Stephane Vanraes

Reputation: 16411

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
})

Upvotes: 6

Auguste
Auguste

Reputation: 2189

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

const svelte = require('svelte')

Upvotes: 0

Related Questions