Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lindsaykwardell/elm-vue-bridge
Bridge to render Elm modules in a Vue application
https://github.com/lindsaykwardell/elm-vue-bridge
elm vue
Last synced: 3 months ago
JSON representation
Bridge to render Elm modules in a Vue application
- Host: GitHub
- URL: https://github.com/lindsaykwardell/elm-vue-bridge
- Owner: lindsaykwardell
- License: mit
- Created: 2020-01-16T06:23:31.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-05-13T02:25:42.000Z (over 2 years ago)
- Last Synced: 2024-09-30T05:22:45.785Z (3 months ago)
- Topics: elm, vue
- Language: Elm
- Homepage: https://elm-vue-bridge.lindsaykwardell.com/
- Size: 530 KB
- Stars: 14
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://elm-vue-bridge.lindsaykwardell.com/) for full explanation of how to use this package. For quick setup, read on!
### Vite
```bash
# 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
```js
import elmPlugin from "vite-plugin-elm";
export default {
plugins: [elmPlugin()]
}
```
### Vue CLI
Terminal
```bash
# 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
```javascript
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
use: { loader: "elm-webpack-loader", options: {} }
}
]
}
}
};
```
### Nuxt 3 (Vite enabled)
```bash
# 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
```js
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
```html
import { Elm } from "./Main.elm";
import elmBridge from "./lib";
const Counter = elmBridge(Elm);
```
You can also pass in flags and ports as props:
```javascript
```
## License
This project is MIT Licensed.