elm-vue-bridge

Bridge to render Elm modules in a Vue application

Renders Elm 0.19 modules within Vue 3. If you need to support Vue 2, please continue to use the previous major version.

Usage

Check out the docs for full explanation of how to use this package. For quick setup, read on!

Vite

# Install dependencies
npm install elm-vue-bridge
npm install --save-dev elm-tooling vite-plugin-elm 

# Initialize elm tooling
npx elm-tooling init
npx elm init

# Install elm and related tools
npx elm-tooling install

vite.config.js

import elmPlugin from "vite-plugin-elm";

export default {
  plugins: [elmPlugin()]
}

Vue CLI

Terminal

# Install dependencies
npm install elm-vue-bridge
npm install --save-dev elm-tooling elm-webpack-loader

# Initialize elm tooling
npx elm-tooling init
npx elm init

# Install elm and related tools
npx elm-tooling install

vue.config.js

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          use: { loader: "elm-webpack-loader", options: {} }
        }
      ]
    }
  }
};

Nuxt 3 (Vite enabled)

# Install dependencies
npm install elm-vue-bridge
npm install --save-dev elm-tooling vite-plugin-elm

# Initialize elm tooling
npx elm-tooling init
npx elm init

# Install elm and related tools
npx elm-tooling install

nuxt.config.ts

import { defineNuxtConfig } from "nuxt3";
import elmPlugin from "vite-plugin-elm";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  vite: {
    plugins: [elmPlugin()],
  },
});

App.vue

<script setup>
import { Elm } from "./Main.elm";
import elmBridge from "./lib";

const Counter = elmBridge(Elm);
</script>

<template>
  <Counter />
</template>

You can also pass in flags and ports as props:

<template>
  <Counter :flags="flags" :ports="ports" />
</template>

License

This project is MIT Licensed.