How to Export Functions and Variables from a Svelte Component

In this tutorial, you’ll learn how to export functions and variables from a Svelte component. By exporting additional elements from a component, you can provide other components the ability to access and use them. Let’s dive in!

To begin, you may already be familiar with importing a Svelte component into another component using the following syntax:

<script>
import Button from './Button.svelte';
</script>

But what if you want to export something more than just the default export? In order to achieve this, you need to use a special script tag within the component with the context="module" attribute.

Here’s an example to illustrate the process. Let’s say you have a Button component defined in a file called Button.svelte:

<button>A button</button>

If you want to allow other components to change the color of the button, you can export a function called changeColor in the special script tag:

<script context="module">
export function changeColor() {
  // ...add logic...
}
</script>

<button>A button</button>

Please note that the example provided does not include the actual functionality for changing the color, but it serves the purpose of demonstrating the concept.

It’s important to point out that you can also have another regular script tag within the component.

Now, other components can import the Button component, which is the default export, as well as the changeColor function:

<script>
import Button, { changeColor } from './Button.svelte';
</script>

That’s it! You now know how to export functions and variables from a Svelte component. Feel free to experiment and explore different ways to extend the capabilities of your components.