README

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

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.

Usage no npm install needed!