Skip to content
a single-spa plugin for svelte applications
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE initial pass to allow svelte 3 support May 13, 2019


Generic lifecycle hooks for Svelte applications that are registered as applications of single-spa.


In addition to this Readme, example usage of single-spa-svelte can be found in the single-spa-examples project.


First, in the single-spa application, run npm install --save single-spa-svelte. Then, create an entry file with the following.

import singleSpaSvelte from 'single-spa-svelte';
import myRootSvelteComponent from 'my-root-svelte-component.js';

const svelteLifecycles = singleSpaSvelte({
  component: myRootSvelteComponent,
  domElementGetter: () => document.getElementById('svelte-app'),
  data: { someData: 'data' }

export const bootstrap = [

export const mount = [

export const unmount = [


All options are passed to single-spa-svelte via the opts parameter when calling singleSpaSvelte(opts). The following options are available:

  • component: (required) The root component that will be rendered. This component should be compiled by svelte and not an iife.
  • domElementGetter: (required) A function which will return a dom element. The root component will be mounted in this element.

Svelte-specific options

  • anchor: (optional) A child of the dom element identified by domElementGetter to render the component immediately before
  • hydrate: (optional) See the svelte Creating a component documentation
  • intro: (optional) If true, will play transitions on initial render, rather than waiting for subsequent state changes
  • props: (optional) An object of properties to supply to the component
You can’t perform that action at this time.