v2 Migration

v2 introduces Svelte 5 support and an API overhaul to better solve the community requests from v1.

svelte-modals/legacy

There are breaking changes – methods have been renamed, moved around and the internals have been rewritten from stores to runes. While I anticipate this migration is mostly a matter of renaming imports and methods, I’ve provided a legacy wrapper to make the transition easier. This will allow you continue using v1 APIs as a wrapper around v2 and incrementally migrate your codebase.

If you encounter any problems please open an issue

<script>
  import { openModal, closeModal } from 'svelte-modals/legacy'
  import MyModal from '$lib/components/MyModal.svelte'

  function handleClick() {
    openModal(MyModal, { title: "Alert", message: "This is an alert" })
  }
</script>

<button onclick={handleClick}>Open Modal</button>

Breaking Changes

Svelte 5 is now required as a peer dependency
modals has been changed from a store to being the main entrypoint for most svelte-modals methods.
- openModal -> modals.open and now returns a promise
  - when using { replace: true } and the currently opened modal prevents the close, the promise will reject
- closeModal -> modals.close
- closeAllModals -> modals.closeAll
- modals -> modals.stack and changed from a store to a rune
- action -> modals.action and changed from a store to a rune
- transition -> modals.transition and changed from a store to a rune
<Modals /> has been updated to use snippets instead of slots. The default slot has been changed to a modals snippet.
- svelte-modals/legacy continues to use slots and the default slot
Deferred transitions are now enabled by using the exitBeforeEnter instead of forwarding events

Types

SvelteModalComponent has been renamed to ModalComponent and updated for Svelte 5 component types
LazySvelteModalComponent has been renamed to LazyModalComponent and updated for Svelte 5 component types