Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amirmahdimajedi/vue-elm-components
Simply embed Elm apps as components into your Vue.js applications
https://github.com/amirmahdimajedi/vue-elm-components
elm flags javascript ports vue
Last synced: about 4 hours ago
JSON representation
Simply embed Elm apps as components into your Vue.js applications
- Host: GitHub
- URL: https://github.com/amirmahdimajedi/vue-elm-components
- Owner: amirmahdimajedi
- Created: 2021-05-30T09:40:12.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-06-08T20:56:56.000Z (over 3 years ago)
- Last Synced: 2025-01-03T16:07:54.697Z (7 days ago)
- Topics: elm, flags, javascript, ports, vue
- Language: JavaScript
- Homepage: https://npmjs.org/vue-elm-components
- Size: 235 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-elm-components
> Simply embed Elm apps as components into your Vue.js applications
This package makes it easy to turn Elm code into Vue.js components.
Companies that use Elm in production usually start small. Read more about how to use Elm at work [here](http://elm-lang.org/blog/how-to-use-elm-at-work).
## Development Status
- **Immediate Goals**
- Add demos for Elm 0.18 and 0.19
- Add automated tests
- **Coming Soon**
- Interact with Elm ports using Vue.js props and events
## Usage
### Installation
```**shell**
npm i vue-elm-components
```
### Basic Usage
If you have an Elm app, you can import it using the [elm-webpack-loader](https://github.com/elm-community/elm-webpack-loader) and embed it in your Vue code like this:
```html
import VElm from 'vue-elm-components'
import Counter from '@/path/to/file/Counter.elm'
export default {
data: { Counter },
components: { VElm }
}
```
### Flags
Sometimes you want to give your Elm program some **flags** on start up. Let's say we want our counter to start at 5. You would write something like this:
```html
import VElm from 'vue-elm-components'
import Counter from '@/path/to/file/Counter.elm'
export default {
data: {
Counter,
flags: { start: 5 }
},
components: { VElm }
}
```
These flags will be given to the Elm program, allowing you to do some setup work in your Vue code first.
### JavaScript/Elm Interop
As your Elm program gets fancier, you will probably need to interact with JavaScript. We do this with **ports**. Think of these as holes in the side of an Elm program that let you pass messages back-and-forth.
So let's say we want to extend our app to allow outsiders to modify the counter through the `counter` port. And maybe we also expose the current count so that outsiders can subscribe to it using the `countChanged` port. You would set it up like this:
```html
import VElm from 'vue-elm-components'
import Counter from '@/path/to/file/Counter.elm'
export default {
data: {
Counter,
currentCount: 0,
},
methods: {
setupPorts(ports) {
ports.countChanged.subscribe((n) => {
this.currentCount = n;
});
ports.counter.send(1);
ports.counter.send(1);
}
},
components: { VElm }
}
```
## Advanced Usage
Once the Elm component is initialized, changing the `flags` and `ports` properties will do nothing. So here are some tricks that may help you out:
1. If you want to reinitialize your Elm component, add a different `key` to the old and new components. This way old one is destroyed and replaced by the new one.
2. This package is super simple. Check out the implementation and do it different if you want!
3. You can also use compiled versions of your elm app (`.js` outputs) if you find it easier.
4. The default export from an Elm module (`.elm` or compiled to `.js`) is an object which contains your app as a property. For example, you can imagine that a file named `Counter.elm`, or its compiled counterpart named `dist/counter.js` will export something like this:
```javascript
export default {
Elm: {
Main: {
embed: [[Function]], // version 0.18 and prior
init: [[Function]], // since version 0.19
}
}
}
```
## Angular, Ember, etc.
If you want to embed Elm in something else, you are in luck!
[The implementation](src/elm.vue) is pretty short, mostly Vue-related. The important lines are basically running the following program at the correct time:
```javascript
import App from "@/path/to/file/App.elm";
var app = App.Elm.Main.embed(node, flags);
setupPorts(app.ports)
```
So if you are interested in embedding Elm in something else, do the same trick! You can get more complete docs on embedding Elm in JS [here](https://guide.elm-lang.org/interop/). Let the community know if you make something!
---
This package was inspired by [react-elm-components](https://github.com/cultureamp/react-elm-components/) which is maintained by the good folks at Culture Amp.