How to export functions and variables from a Svelte component
Learn how to export functions and variables from a Svelte component
You know that you can import a Svelte component into another using the syntax
<script>
import Button from './Button.svelte';
</script>
What if you want to export something more than the default export?
Well, you must export it from a special script
tag into the component, with the context="module"
attribute.
Here’s an example. Say you have a Button component in Button.svelte
:
<button>A button</button>
and you want to provide other components the ability to change the color of the button. You could use props, that’s one example. Or you can provide a function, called changeColor
.
You write and export it in this special script
tag:
<script context="module">
export function changeColor() {
//...add logic..
}
</script>
<button>A button</button>
Warning: I did not implement the actual functionality, but you get the idea.
Note that you can have another “normal” script tag, in the component.
Now other components can import Button, which is the default export, and the changeColor
function too:
<script>
import Button, { changeColor } from './Button.svelte'
</script>
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025