Search code examples
sveltesvelte-3

Import Svelte component globally

In my app i have Snackbar component which is used in multiple other components.

At the moment im importing the Snackbar component into each component, where it will be used, and all is working fine

Was wondering if it possible to import the Snackbar component globally only once and access it from any other component without explicitly importing it into each component?

Solution

  • No it isn't.

    Svelte follows ES Modules behavior for it's components, so we get static analysis benefits, like tree shaking and code splitting.

    I suggest you to use IDE that autocompletes imports for you, or you can create snippets with repetitive imports.

    You can also create files with reexports and use namespace imports, then use them like

    <namespace.That />

    In most cases I'd consider that a code smell though.