astro-integration-elm
This Astro integration enables server-side rendering and client-side hydration for your Elm components.
Installation
To use this integration your project must be using astro version 1.6 or greater.
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)
An example Elm component
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!
Next steps
Learn Astro
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
Learn Elm
If you're not already familiar with Elm, a great place to start is the Official Guide.
More about the Elm Astro Integration
For some more interesting examples of astro-integration-elm, see the guide in the docs or check out the announcement post on my blog.