vleam/vue

Types

App

A Vue App

pub type App

Component

</>

A Vue Component

pub type Component

ComponentBase

</>

An incomplete component representation piped during component definition. See define_component for a full example.

pub type ComponentBase(props, emits)

Computed

</>

A vue computed

pub type Computed(value)

DebuggerEvent

</>

DebuggerEvent returned from Vue

pub type DebuggerEvent

Directive

</>

A vue directive

pub type Directive

NullableRef

</>

NullableRef auto (un)wraps Option This is a convenience to use with refs used in templates

pub type NullableRef(value)

NullableShallowRef

</>

Shallow version of NullableRef

pub type NullableShallowRef(value)

Prop

</>

Prop record to be used on component definition. See define_component for a full example.

pub type Prop(value) {
  Prop(name: String, default: Option(value))
}

Constructors

Prop(name: String, default: Option(value))

Ref

</>

A vue ref

pub type Ref(value)

ShallowRef

</>

A vue shallowRef

pub type ShallowRef(value)

VueError

</>

pub type VueError {
  ComponentNotFound
}

Constructors

```
ComponentNotFound
```

Watchable

</>

Watchable types

pub type Watchable(value) {
  Ref(watchable: Ref(value))
  ShallowRef(watchable: ShallowRef(value))
  NullableRef(watchable: NullableRef(value))
  NullableShallowRef(watchable: NullableShallowRef(value))
  Computed(watchable: Computed(value))
  Function(watchable: fn() -> value)
  Plain(watchable: value)
}

Constructors

```
Ref(watchable: Ref(value))
```

ShallowRef(watchable: ShallowRef(value))

NullableRef(watchable: NullableRef(value))

NullableShallowRef(watchable: NullableShallowRef(value))

```
Computed(watchable: Computed(value))
```
```
Function(watchable: fn() -> value)
```
```
Plain(watchable: value)
```

Functions

computed

</>

pub fn computed(value: fn() -> a) -> Computed(a)

Define computed

computed_value

</>

pub fn computed_value(computed: Computed(a)) -> a

Get computed value

define_component

</>

pub fn define_component(
  components: List(#(String, fn() -> Component)),
  directives: List(#(String, fn() -> Directive)),
  inherit_attrs: Bool,
) -> ComponentBase(Nil, Nil)

Entrypoint for component definition. optionally piped to a with_n_props and/or with_emits functions, and must be finally piped to setup.

components is a list of #(component_name, fn() -> Component) tuples. There are three possible ways to gain access to components:

Using @external to refer to a component defined in Javascript
Importing a component defined in Gleam using this library
Using them without the need to refer them in define_component, either by defining them globally vue.component or by an auto-import mechanism similar to Nuxt’s

directives is a list of #(directive_name, fn() -> Directive) tuples.

inherit_attrs is a boolean the same as Vue’s javascript configuration.

Example

import gleam/option.{None, Some}
import gleam/string
import vleam/vue.{
  type Component, Prop, define_component, setup, with_2_props,
}

import vleam_todo/models.{type Todo, type TodoError}

type InputEvent

// Import the default export from HelloWorld.vue
// This is technically an incorrect type, but it'll work. C'est la vie.
@external(javascript, "/src/components/HelloWorld.vue", "default")
fn hello_world_component() -> Component

// Also works for external packages, although @ sign has to be aliased
@external(javascript, "heroicons/vue/24/solid", "UserIcon")
fn user_icon() -> Component

// or you can predefine in TS/JS
@external(javascript, "/src/ffi.ts", "CheckIcon")
fn check_icon() -> #(String, fn() -> Component)

pub fn default_export() -> Component {
  define_component(
    [
      #("HelloWorld", hello_world_component),
      #("UserIcon", user_icon),
      check_icon(),
    ],
    [],
    False,
  )
  |> with_2_props(#(
    // No default value, therefore mandatory
    Prop("initialName", None),
    // Default value, therefore optional
    Prop("greeting", Some("Hello, ")),
  ))
  // It's best practice to always type the props, as types are only inferred if
  // there's a default value.
  |> setup(fn(props: #(String, String), _) {
    let initial_name = props.0
    let greeting = props.1
    case string.length(greeting) > 0 {
      True -> {
        let change_count = vue.shallow_ref(0)
        let increment_count = fn() {
          change_count
          |> vue.shallow_ref_set(vue.shallow_ref_value(change_count) + 1)
        }
        let name = vue.shallow_ref(initial_name)
        let change_name = fn(new_name) {
          name
          |> vue.shallow_ref_set(new_name)
        }
        let full_greeting =
          vue.computed(fn() {
            name
            |> vue.shallow_ref_value
            |> string.append(greeting)

            increment_count()
          })

        // To return values to the template, the FFI expects an Ok() with a
        // tuple of object entires tuples. The following is identical to Vue's:
        //
        // return {
        //   fullGreeting: full_greeting,
        //   changeName: change_name,
        // };
        Ok(
          #(#("fullGreeting", full_greeting), #("changeName", change_name), #(
            "changeCount",
            change_count,
          )),
        )
      }
      False -> {
        // Errors are thrown. This is just a demo, don't throw on bad input,
        // only on irrecoverable errors.
        Error("Empty greeting")
      }
    }
  })
}

get_component

</>

pub fn get_component(
  vue_app: App,
  component_name: String,
) -> Result(Component, VueError)

Returns components that were registered using app.component

next_tick

</>

pub fn next_tick(callback: Option(fn() -> Nil)) -> Promise(Nil)

vue.nextTick() https://vuejs.org/api/general.html#nexttick

nullable_ref

</>

pub fn nullable_ref(value: Option(a)) -> NullableRef(a)

nullable_ref_set

</>

pub fn nullable_ref_set(
  ref: NullableRef(a),
  new_value: Option(a),
) -> NullableRef(a)

nullable_ref_value

</>

pub fn nullable_ref_value(ref: NullableRef(a)) -> Option(a)

nullable_shallow

</>

pub fn nullable_shallow(
  value: Option(a),
) -> NullableShallowRef(a)

nullable_shallow_set

</>

pub fn nullable_shallow_set(
  ref: NullableShallowRef(a),
  new_value: Option(a),
) -> NullableShallowRef(a)

nullable_shallow_value

</>

pub fn nullable_shallow_value(
  ref: NullableShallowRef(a),
) -> Option(a)

on_activated

</>

pub fn on_activated(handler: fn() -> Nil) -> Nil

on_before_mount

</>

pub fn on_before_mount(handler: fn() -> Nil) -> Nil

on_before_unmount

</>

pub fn on_before_unmount(handler: fn() -> Nil) -> Nil

on_before_update

</>

pub fn on_before_update(handler: fn() -> Nil) -> Nil

on_deactivated

</>

pub fn on_deactivated(handler: fn() -> Nil) -> Nil

on_mounted

</>

pub fn on_mounted(handler: fn() -> Nil) -> Nil

on_unmounted

</>

pub fn on_unmounted(handler: fn() -> Nil) -> Nil

on_updated

</>

pub fn on_updated(handler: fn() -> Nil) -> Nil

ref

</>

pub fn ref(initial_value: a) -> Ref(a)

Define a ref

ref_set

</>

pub fn ref_set(ref: Ref(a), value: a) -> Ref(a)

Set ref value

ref_value

</>

pub fn ref_value(value: Ref(a)) -> a

Get ref value

register_component

</>

pub fn register_component(
  vue_app: App,
  component_name: String,
  component: Component,
) -> App

Registers components using app.component

setup

</>

pub fn setup(
  base: ComponentBase(a, b),
  setup: fn(a, b) -> c,
) -> Component

Component setup function See define_component for a full example.

shallow_ref

</>

pub fn shallow_ref(value: a) -> ShallowRef(a)

Define a shallow ref

shallow_ref_set

</>

pub fn shallow_ref_set(ref: ShallowRef(a), value: a) -> Ref(a)

Set shallow ref value

shallow_ref_value

</>

pub fn shallow_ref_value(a: ShallowRef(a)) -> a

Get shallow ref value

trigger_nullable_shallow

</>

pub fn trigger_nullable_shallow(
  ref: NullableShallowRef(a),
) -> Nil

trigger_ref

</>

pub fn trigger_ref(ref: ShallowRef(a)) -> Nil

Trigger a shallow ref

watch1

</>

pub fn watch1(
  reflikes: #(Watchable(a)),
  callback: fn(a, a, Option(fn(fn() -> Nil) -> Nil)) -> Nil,
) -> Nil

watch1_with_options

</>

pub fn watch1_with_options(
  reflikes: #(Watchable(a)),
  callback: fn(a, a, Option(fn(fn() -> Nil) -> Nil)) -> Nil,
  immediate: Option(Bool),
  deep: Option(Bool),
  flush: Option(String),
  on_track: Option(fn(DebuggerEvent) -> Nil),
  on_trigger: Option(fn(DebuggerEvent) -> Nil),
  once: Option(Bool),
) -> Nil

watch2

</>

pub fn watch2(
  reflikes: #(Watchable(a), Watchable(b)),
  callback: fn(
    #(Watchable(a), Watchable(b)),
    #(Watchable(a), Watchable(b)),
    Option(fn(fn() -> Nil) -> Nil),
  ) -> Nil,
) -> Nil

watch2_with_options

</>

pub fn watch2_with_options(
  reflikes: #(Watchable(a), Watchable(b)),
  callback: fn(
    #(Watchable(a), Watchable(b)),
    #(Watchable(a), Watchable(b)),
    Option(fn(fn() -> Nil) -> Nil),
  ) -> Nil,
  immediate: Option(Bool),
  deep: Option(Bool),
  flush: Option(String),
  on_track: Option(fn(DebuggerEvent) -> Nil),
  on_trigger: Option(fn(DebuggerEvent) -> Nil),
  once: Option(Bool),
) -> Nil

watch3

</>

pub fn watch3(
  reflikes: #(Watchable(a), Watchable(b), Watchable(c)),
  callback: fn(
    #(Watchable(a), Watchable(b), Watchable(c)),
    #(Watchable(a), Watchable(b), Watchable(c)),
    Option(fn(fn() -> Nil) -> Nil),
  ) -> Nil,
) -> Nil

watch3_with_options

</>

pub fn watch3_with_options(
  reflikes: #(Watchable(a), Watchable(b), Watchable(c)),
  callback: fn(
    #(Watchable(a), Watchable(b), Watchable(c)),
    #(Watchable(a), Watchable(b), Watchable(c)),
    Option(fn(fn() -> Nil) -> Nil),
  ) -> Nil,
  immediate: Option(Bool),
  deep: Option(Bool),
  flush: Option(String),
  on_track: Option(fn(DebuggerEvent) -> Nil),
  on_trigger: Option(fn(DebuggerEvent) -> Nil),
  once: Option(Bool),
) -> Nil

watch4

</>

pub fn watch4(
  reflikes: #(
    Watchable(a),
    Watchable(b),
    Watchable(c),
    Watchable(d),
  ),
  callback: fn(
    #(Watchable(a), Watchable(b), Watchable(c), Watchable(d)),
    #(Watchable(a), Watchable(b), Watchable(c), Watchable(d)),
    Option(fn(fn() -> Nil) -> Nil),
  ) -> Nil,
) -> Nil

watch4_with_options

</>

pub fn watch4_with_options(
  reflikes: #(
    Watchable(a),
    Watchable(b),
    Watchable(c),
    Watchable(d),
  ),
  callback: fn(
    #(Watchable(a), Watchable(b), Watchable(c), Watchable(d)),
    #(Watchable(a), Watchable(b), Watchable(c), Watchable(d)),
    Option(fn(fn() -> Nil) -> Nil),
  ) -> Nil,
  immediate: Option(Bool),
  deep: Option(Bool),
  flush: Option(String),
  on_track: Option(fn(DebuggerEvent) -> Nil),
  on_trigger: Option(fn(DebuggerEvent) -> Nil),
  once: Option(Bool),
) -> Nil

watch5

</>

pub fn watch5(
  reflikes: #(
    Watchable(a),
    Watchable(b),
    Watchable(c),
    Watchable(d),
    Watchable(e),
  ),
  callback: fn(
    #(
      Watchable(a),
      Watchable(b),
      Watchable(c),
      Watchable(d),
      Watchable(e),
    ),
    #(
      Watchable(a),
      Watchable(b),
      Watchable(c),
      Watchable(d),
      Watchable(e),
    ),
    Option(fn(fn() -> Nil) -> Nil),
  ) -> Nil,
) -> Nil

watch5_with_options

</>

pub fn watch5_with_options(
  reflikes: #(
    Watchable(a),
    Watchable(b),
    Watchable(c),
    Watchable(d),
    Watchable(e),
  ),
  callback: fn(
    #(
      Watchable(a),
      Watchable(b),
      Watchable(c),
      Watchable(d),
      Watchable(e),
    ),
    #(
      Watchable(a),
      Watchable(b),
      Watchable(c),
      Watchable(d),
      Watchable(e),
    ),
    Option(fn(fn() -> Nil) -> Nil),
  ) -> Nil,
  immediate: Option(Bool),
  deep: Option(Bool),
  flush: Option(String),
  on_track: Option(fn(DebuggerEvent) -> Nil),
  on_trigger: Option(fn(DebuggerEvent) -> Nil),
  once: Option(Bool),
) -> Nil

with_1_prop

</>

pub fn with_1_prop(
  component: ComponentBase(a, b),
  props: #(Prop(c)),
) -> ComponentBase(#(c), b)

Define 1 prop on a component See define_component for a full example.

with_2_props

</>

pub fn with_2_props(
  component: ComponentBase(a, b),
  props: #(Prop(c), Prop(d)),
) -> ComponentBase(#(c, d), b)

Define 2 props on a component See define_component for a full example.

with_3_props

</>

pub fn with_3_props(
  component: ComponentBase(a, b),
  props: #(Prop(c), Prop(d), Prop(e)),
) -> ComponentBase(#(c, d, e), b)

Define 3 props on a component See define_component for a full example.

with_4_props

</>

pub fn with_4_props(
  component: ComponentBase(a, b),
  props: #(Prop(c), Prop(d), Prop(e), Prop(f)),
) -> ComponentBase(#(c, d, e, f), b)

Define 4 props on a component See define_component for a full example.

with_5_props

</>

pub fn with_5_props(
  component: ComponentBase(a, b),
  props: #(Prop(c), Prop(d), Prop(e), Prop(f), Prop(g)),
) -> ComponentBase(#(c, d, e, f, g), b)

Define 5 props on a component See define_component for a full example.

with_6_props

</>

pub fn with_6_props(
  component: ComponentBase(a, b),
  props: #(Prop(c), Prop(d), Prop(e), Prop(f), Prop(g), Prop(h)),
) -> ComponentBase(#(c, d, e, f, g, h), b)

Define 6 props on a component See define_component for a full example.

with_7_props

</>

pub fn with_7_props(
  component: ComponentBase(a, b),
  props: #(
    Prop(c),
    Prop(d),
    Prop(e),
    Prop(f),
    Prop(g),
    Prop(h),
    Prop(i),
  ),
) -> ComponentBase(#(c, d, e, f, g, h, i), b)

Define 7 props on a component See define_component for a full example.

with_8_props

</>

pub fn with_8_props(
  component: ComponentBase(a, b),
  props: #(
    Prop(c),
    Prop(d),
    Prop(e),
    Prop(f),
    Prop(g),
    Prop(h),
    Prop(i),
    Prop(j),
  ),
) -> ComponentBase(#(c, d, e, f, g, h, i, j), b)

Define 8 props on a component See define_component for a full example.

with_9_props

</>

pub fn with_9_props(
  component: ComponentBase(a, b),
  props: #(
    Prop(c),
    Prop(d),
    Prop(e),
    Prop(f),
    Prop(g),
    Prop(h),
    Prop(i),
    Prop(j),
    Prop(k),
  ),
) -> ComponentBase(#(c, d, e, f, g, h, i, j, k), b)

Define 9 props on a component See define_component for a full example.

with_emits

</>

pub fn with_emits(
  base: ComponentBase(a, b),
  emits: List(String),
) -> ComponentBase(a, c)

Define emits on a component