v4.0.0Published 2 years ago

Svelte for Meteor

Build cybernetically enhanced web apps with Meteor and Svelte.

Fork based on meteor-svelte 4 beta with support for HMR using the hot-module-reload package.


To use meteor-svelte, run the following commands:

$ meteor add svelte:compiler
$ meteor npm install svelte@<version>


Compiler options can be specified with a "svelte:compiler" property in package.json. For example:

  "svelte:compiler": {
    "extensions": ["svelte", "html"],
    "hydratable": true,
    "css": false

extensions (default: ["svelte"])

An array of file extensions to be recognized by the package. Note that HTML files are not compiled with the Svelte compiler if they contain top-level <head> or <body> elements. Instead, the contents of the elements are added to the respective sections in the HTML output generated by Meteor (similar to what the static-html package does).

hydratable (default: false)

By default, Svelte removes server-rendered static HTML when the application is loaded on the client and replaces it with a client-rendered version. If you want to reuse (hydrate) server-rendered HTML, set the hydratable option to true (which generates additional code for client components) and use the hydrate option when instantiating your root component.

css (default: true)

Svelte can extract styles for server-side rendering. If you want to render CSS on the server, you might want to set the css option to false so that client-rendered components don't insert CSS into the DOM.

Server-Side Rendering

meteor-svelte supports server-side rendering with minimal configuration. If you import Svelte components on the server, they are automatically built for server-side rendering. See the Svelte API docs, the example app, and the hydratable and css options above for more details.