This Astro integration enables server-side rendering and client-side hydration for your Elm components.
First, once you have set up your Astro project, install the astro-integration-elm package:
npm install astro-integration-elmMost package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'elm'" (or similar) warning when you start up Astro, you'll need to install Elm:
npm install elmNow, apply this integration to your astro.config.* file using the integrations property:
astro.config.mjs
+ import elm from "astro-integration-elm";
export default defineConfig({
+ integrations: [elm()],
});Finally, run elm init to create an elm.json, and change source-directories to reflect the directories you plan to put your Elm components in.
npx elm initelm.json
"source-directories": [
+ "src"
- "src/components"
],(If you're using git you should probably also add the elm-stuff folder to your .gitignore)
src/pages/index.astro
---
import Hello from "../components/Hello.elm";
---
<html>
<body>
<Hello /> from Astro and Elm!
</body>
</html>src/components/Hello.elm
module Hello exposing (main)
import Html
main = Html.text "Hello world"Now start up the dev server...
npm run astro dev
... and you should see your server side rendered Elm! 🥳
To learn the Astro's concepts, head to the UI framework documentation. You'll explore:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🤝 opportunities to mix and nest frameworks together
If you're not already familiar with Elm, a great place to start is the Official Guide.
➡️ For some more interesting examples of astro-integration-elm, see the guide in the docs or check out the announcement post on my blog.