Skip to content

Latest commit

 

History

History
100 lines (65 loc) · 2.45 KB

README.md

File metadata and controls

100 lines (65 loc) · 2.45 KB
Raw

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-elm

Most 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 elm

Now, 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 init

elm.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.