Use Svelte to write Eleventy templates. Get all the benefits of Svelte's great developer-experience, including a nice templating language and same-file scoped CSS, but for your static websites.
npm install @oliverjam/eleventy-plugin-svelte- Requires Eleventy
0.11.0or newer - Requires
ELEVENTY_EXPERIMENTAL=trueto be set before you run theeleventybuild (so we can use Custom File Extension Handlers)
See the example/ directory for a full code sample.
First add install this plugin, then import it and add it to your config in .eleventy.js.
const pluginSvelte = require("@oliverjam/eleventy-plugin-svelte");
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(pluginSvelte);
};Write your page templates as Svelte components. Whatever HTML the component renders will be used as the contents of the template.
Set Eleventy data (e.g. layouts) using Svelte's <script context="module">.
<!-- index.svelte -->
<script context="module">
export const data = { layout: "layouts/base.njk" };
</script>
<h1>Hello world</h1>This plugin will extract any CSS from the component's <style> tags and any head contents from its <svelte:head> tags. These are made available for you to use in layouts via Eleventy filters named: getSvelteCssForPage and getSvelteHeadForPage. For example:
<!-- _includes/layouts/base.njk -->
<!doctype html>
<html>
<head>
<style>
{{page.url | getSvelteCssForPage}}
</style>
{{page.url | getSvelteHeadForPage | safe}}
</head>
<body>
{{content | safe}}
</body>
</html>Your Svelte components can access all Eleventy data via props. Export the keys you want to access in a script tag.
<!-- index.svelte -->
<script>
export collections;
</script>
<ul>
{#each collections.blog as post}
<li>{post.data.title}</li>
{/each}
</ul>Currently this plugin does not produce any client-side JS. Your Svelte components are rendered to static HTML & CSS only. Optional client-side hydration will (hopefully) be added in a future version when I can figure out Rollup.