Svelte 5 Plugin for Build Awesome (11ty) v1.0.1

An official Svelte plugin for Build Awesome and Eleventy to process .svelte files as templates and output server-rendered components that ship no client-side JavaScript.

Usage

npm install @11ty/eleventy-plugin-svelte

Add it to your configuration file (usually eleventy.config.js):

import sveltePlugin from "@11ty/eleventy-plugin-svelte";

export default function($config) {
  $config.addPlugin(sveltePlugin);
}

Output component CSS and <svelte:head> content in your layout:

<head>
  {% getBundle "head" %}
  <style>{% getBundle "css" %}</style>
</head>

Requirements

• Eleventy 3.0.0+ or Build Awesome 4.0.0+
• Svelte 5
• Node.js 22 or newer

Features

• Builds *.svelte files in the input directory as pages. Files in the includes directory can be imported but don't write any output.
• Each component's <style> blocks, including those of components it imports, are added to the page's css bundle.
• <svelte:head> content is added to the page's head bundle.
• export const data in <script module> (an object or a function) feeds into the data cascade.
• The page's data cascade is passed to the page component as props.
• Every component can read page, data and functions (JavaScript template functions, universal filters and shortcodes) through getContext.
• Top-level await works in components, using Svelte's async SSR.
• Supports .svelte.js and .svelte.ts modules (runes outside components).
• .svelte files work as layouts: render the child template with {@html content}, and can chain to another layout with layout via data.
• Compiled components are cached on disk. A later build skips compiling when no component, imported module, plugin option or Svelte version has changed.
• Plugin options for: cacheDirectory, input, cssBundleName, headBundleName, cssBundleBucket, compilerOptions, preprocess, configureContext and rollupOptions.

Limitations

• No client-side hydration yet.
• Svelte's hydration comment markers stay in the output until Svelte adds an official API to strip them.

Full Changelog: svelte-1.0.0...svelte-1.0.1