Skip to main content
Unmounts a component that was previously mounted using mount() or hydrate(). Since 5.13.0, if options.outro is true, transitions will play before the component is removed from the DOM. Returns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise. 
function unmount(
  component: Record<string, any>,
  options?: { outro?: boolean }
): Promise<void>

​
Parameters

​
component
Record<string, any>
required
The component instance returned by mount() or hydrate()
​
options
{ outro?: boolean }
Optional configuration for unmounting
​
outro
boolean
default:"false"
Whether to play outro transitions before removing the component from the DOM (available since 5.13.0)

​
Returns

​
promise
Promise<void>
A promise that resolves after transitions have completed if options.outro is true, or immediately otherwise

​
Examples

​
Basic usage

import { mount, unmount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { target: document.body });

// Later...
await unmount(app);

​
With outro transitions

import { mount, unmount } from 'svelte';
import Modal from './Modal.svelte';

const modal = mount(Modal, { target: document.body });

// Play outro transitions before unmounting
await unmount(modal, { outro: true });
console.log('Modal has been removed with transitions');

​
Conditional unmounting

import { mount, unmount } from 'svelte';
import Tooltip from './Tooltip.svelte';

let tooltip = null;

function showTooltip() {
  tooltip = mount(Tooltip, {
    target: document.body,
    props: { text: 'Hello!' }
  });
}

async function hideTooltip() {
  if (tooltip) {
    await unmount(tooltip, { outro: true });
    tooltip = null;
  }
}

​
Notes

  • Calling unmount() on a component that was never mounted or has already been unmounted will resolve immediately without error (in production)
  • In development mode, attempting to unmount a component twice will trigger a warning
  • If outro is true, the promise will wait for all outro transitions to complete before resolving
  • The component and all its child components will be destroyed, and cleanup functions will be called