Eleventy Plugin Embed Svelte

🎉 Embed Svelte Components in Your 11ty Site! 🎉

Example Usage

See the example directory for a complete example usage of this plugin.

Check out the example live here 👈

Installation

Install the plugin through npm:

npm install eleventy-plugin-embed-svelte

Then add it to your Eleventy config file, like this:

const embedSvelte = require('eleventy-plugin-embed-svelte');

module.exports = function (eleventyConfig) {
    eleventyConfig.addPlugin(embedSvelte, {
        // Directory that hosts your *.svelte component files (Optional)
        svelteDir: './svelte',
        // Pass options to rollup-plugin-svelte. (Optional)
        rollupPluginSvelteOptions: { preprocess: sveltePreprocess() },
        // Array of Rollup input plugins. (Optional)
        rollupInputPlugins: [],
        // Array of Rollup output plugins. (Optional)
        rollupOutputPlugins: [terser()]
    });

    // Rest of config file...
};

Usage

To embed Svelte components, all you need to do is use the shortcode embedSvelte.

Example

Greeter.svelte

<script>
    export let user;
</script>

<h1>Hello there {user}!</h1>

index.md

Here is our Greeter Svelte component, embedded right into this doc!

{% embedSvelte 'Greeter.svelte', { user: 'Zach Harris' } %}

It's as simple as that!

Features

• A simple shortcode: {% embedSvelte ... %}, that allows you to easily embed any Svelte component and pass in props.
• An Eleventy Transform that works behind the scenes to perform a Rollup build for each page with embedded Svelte components, and efficiently add the code to the output HTML.
• Adds the svelteDir (see plugin's options above) to Eleventy's list of watch targets.