Flags
What are Flags?
From the Elm docsopen in new window:
Flags are a way to pass values into Elm on initialization.
Common uses are passing in API keys, environment variables, and user data. This can be handy if you generate the HTML dynamically. They can also help us load cached information in this localStorage example.
In elm-vue-bridge
, flags are a component prop. The prop takes any data type, but Elm will throw an error if the provided flag is not the expected type. ed in Elm, it must be passed into the Vue component.
Add flag to Elm
Let's update our Elm counter module to accept a flag. Update your Main.elm
to the following (changes highlighted):
module Main exposing (main)
import Browser
import Html exposing (button, div, text)
import Html.Events exposing (onClick)
init initialValue =
( initialValue, Cmd.none )
type Msg
= Increment
| Decrement
update : Msg -> Int -> ( Int, Cmd Msg )
update msg model =
case msg of
Increment ->
( model + 1, Cmd.none )
Decrement ->
( model - 1, Cmd.none )
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
main =
Browser.element { init = init, update = update, view = view, subscriptions = \_ -> Sub.none }
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Add the flags prop
In our Vue component, we then import and create the component as before. We also pass the initial value for Elm in as the :flags
prop.
<script setup>
import elmBridge from 'elm-vue-bridge';
import { Elm } from './Main.elm';
const Counter = elmBridge(Elm);
</script>
<template>
<Counter :flags="2" />
</template>
2
3
4
5
6
7
8
9
10