mount()

Mounts a component to the DOM

Mounts a component to the given target and returns the component exports. Transitions will play during the initial render unless the intro option is set to false.

function mount<Props, Exports>(
  component: Component<Props, Exports>,
  options: MountOptions<Props>
): Exports

Parameters

component · Component<Props, Exports> · required

The Svelte component to mount

options · MountOptions<Props> · required

Configuration options for mounting the component

target · Document | Element | ShadowRoot · required

Target element where the component will be mounted

anchor · Node

Optional node inside target. When specified, the component is rendered immediately before it

props · Props

Component properties. Required if the component expects props

intro · boolean · default: "true"

Whether or not to play transitions on initial render

context · Map<any, any>

Can be accessed via getContext() at the component level

events · Record<string, (e: any) => any> · deprecated

Allows the specification of events. Use callback props instead

transformError · (error: unknown) => unknown | Promise<unknown>

A function that transforms errors caught by error boundaries before they are passed to the failed snippet. Defaults to the identity function

Returns

exports · Exports

The component’s exports (and potentially the props if compiled with accessors: true)

Examples

Basic usage

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

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

Mounting with anchor

import { mount } from 'svelte';
import Component from './Component.svelte';

const anchor = document.getElementById('marker');
const component = mount(Component, {
  target: document.body,
  anchor: anchor,
  props: { count: 0 }
});

Disabling intro transitions

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

// Mount without playing intro transitions
const modal = mount(Modal, {
  target: document.body,
  intro: false
});

With context

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

const context = new Map();
context.set('api', apiClient);

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

Notes

• In Svelte 5, components are functions, not classes. Use mount() instead of new Component()
• The component is mounted synchronously
• To unmount the component later, use the unmount() function
• See the migration guide for more information about the change from Svelte 4