Add a computed value to a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Add a function to a watch

 vue.watch_ref(first_name)
 |> vue.and_function(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Add a plain value to a watch

 vue.watch_ref(first_name)
 |> vue.and_plain(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Add a ref value to a watch

 vue.watch_ref(first_name)
 |> vue.and_ref(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Add a shallow_ref value to a watch

 vue.watch_ref(first_name)
 |> vue.and_shallow_ref(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Define computed

Get computed value

Entrypoint for component definition. optionally piped to a with_n_props and/or with_n_nullable_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:

1. Using @external to refer to a component defined in Javascript
2. Importing a component defined in Gleam using this library
3. Using them without the need to refer them in define_component, either by gloabl definition with 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, identical to Vue’s javascript configuration.

Example

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

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_1_prop(
    Prop("initialName", vue.required()),
  )
  |> with_1_nullable_prop(
    Prop("greeting", vue.with_default("Hello, ")),
  )
  // Props are handed as Computed for reactivity. It's best practice to
  // always type them, as types aren't always inferred.
  |> setup(fn(
    required_props: #(Computed(String)),
    nullable_props: #(Computed(String)),
    _
  ) {
    let initial_name = props.0
    let greeting = props.1

    // Errors return from `setup` are thrown. This is just a demo, don't
    // throw on bad input, only on irrecoverable errors (which generally
    // should never occur in `setup` function)
    use <- bool.guard(
      {
        greeting
        |> vue.computed_value
        |> string.length
      }
      > 0,
      Error("Empty greeting"),
    )

    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 =
      initial_name
      |> vue.computed_value
      |> vue.shallow_ref

    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
          |> vue.computed_value
        )

        increment_count()
      })

    // To return values to the template, the FFI expects an Ok() with a
    // tuple of object entries. The following is identical to Vue's:
    //
    // return {
    //   fullGreeting: full_greeting,
    //   changeName: change_name,
    //   changeCount: change_count,
    // };
    Ok(#(
      #("fullGreeting", full_greeting),
      #("changeName", change_name),
      #("changeCount", change_count),
    ))
  })
}

Returns components that were registered using app.component

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

Set the on_track callback on a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.on_track(fn(_) {
   // ...
 })
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Set the on_trigger callback on a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.on_trigger(fn(_) {
   // ...
 })
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Define a ref

Set ref value

Get ref value

Registers components using app.component

Convenience function to make Prop definitions more readable

Prop("name", required())

Component setup function See define_component for a full example.

Define a shallow ref

Set shallow ref value

Get shallow ref value

Trigger a shallow ref

Define a watcher for 2 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch2(#(
   watch_computed(last_name),
   watch_ref(last_name),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })

If you don’t need the new and old values or only watch a single value, use the quantity-agnostic watch_ and and_ functions by themselves.

Define a watcher for 3 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch3(#(
   watch_computed(last_name),
   watch_ref(last_name),
   watch_shallow_ref(that_uncle_name),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })

If you don’t need the new and old values or only watch a single value, use the quantity-agnostic watch_ and and_ functions by themselves.

Define a watcher for 4 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch4(#(
   watch_computed(last_name),
   watch_ref(last_name),
   watch_shallow_ref(that_annoying_guy),
   watch_shallow_ref(his_annoying_brother),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })

If you don’t need the new and old values or only watch a single value, use the quantity-agnostic watch_ and and_ functions by themselves.

Define a watcher for 5 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch5(#(
   watch_computed(last_name),
   watch_ref(last_name),
   watch_shallow_ref(that_annoying_guy),
   watch_shallow_ref(his_annoying_brother),
   watch_computed(grades),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })

If you don’t need the new and old values or only watch a single value, use the quantity-agnostic watch_ and and_ functions by themselves.

Define a watcher for 6 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch6(#(
   watch_computed(last_name),
   watch_ref(last_name),
   watch_shallow_ref(that_annoying_guy),
   watch_shallow_ref(his_annoying_brother),
   watch_computed(grades),
   watch_computed(passes),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })

If you don’t need the new and old values or only watch a single value, use the quantity-agnostic watch_ and and_ functions by themselves.

Define a watcher for 7 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch7(#(
   watch_computed(last_name),
   watch_ref(last_name),
   watch_shallow_ref(that_annoying_guy),
   watch_shallow_ref(his_annoying_brother),
   watch_computed(grades),
   watch_computed(passes),
   watch_computed(fails),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })

If you don’t need the new and old values or only watch a single value, use the quantity-agnostic watch_ and and_ functions by themselves.

Define a watcher for 8 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch8(#(
   watch_computed(last_name),
   watch_ref(last_name),
   watch_shallow_ref(that_annoying_guy),
   watch_shallow_ref(his_annoying_brother),
   watch_computed(grades),
   watch_computed(passes),
   watch_computed(fails),
   watch_computed(average_grade),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })

If you don’t need the new and old values or only watch a single value, use the quantity-agnostic watch_ and and_ functions by themselves.

Define a watcher for 9 “reflike” values. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch9(#(
   watch_computed(last_name),
   watch_ref(last_name),
   watch_shallow_ref(that_annoying_guy),
   watch_shallow_ref(his_annoying_brother),
   watch_computed(grades),
   watch_computed(passes),
   watch_computed(fails),
   watch_computed(average_grade),
   watch_computed(standard_deviation),
 ))
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(values, old_values, _) {
   // this will fire on a change in `first_name` or `last_name`
   // values, old_values, is a tuple corresponding to the input
 })

If you don’t need the new and old values or only watch a single value, use the quantity-agnostic watch_ and and_ functions by themselves.

Define a watcher for a vue computed. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch_computed(first_name)
 |> vue.and_ref(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // this will fire on a change in `first_name` or `last_name`
   // old, new values are unavailable
 })

If you need the new and old values when more than a single value is watched, use the quantity-aware watchX functions.

Define a watcher for a function. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch_function(get_first_name)
 |> vue.and_computed(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // this will fire on a change in `first_name` or `last_name`
   // old, new values are unavailable
 })

If you need the new and old values when more than a single value is watched, use the quantity-aware watchX functions.

Define a watcher for a plain value. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch_plain(first_name)
 |> vue.and_shallow_ref(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // this will fire on a change in `first_name` or `last_name`
   // old, new values are unavailable
 })

If you need the new and old values when more than a single value is watched, use the quantity-aware watchX functions.

Define a watcher for a vue ref. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // this will fire on a change in `first_name` or `last_name`
   // old, new values are unavailable
 })

If you need the new and old values when more than a single value is watched, use the quantity-aware watchX functions.

Define a watcher for a vue shallow_ref. You can use and_ modifiers to add values to the watch, with_ modifiers to set options, and with_listener for the listen function.

 vue.watch_shallow_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // this will fire on a change in `first_name` or `last_name`
   // old, new values are unavailable
 })

If you need the new and old values when more than a single value is watched, use the quantity-aware watchX functions.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Set the deep option on a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_deep(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Convenience function to make Prop definitions more readable

Prop("name", with_default("John Sumisu"))

Define emits on a component

Set the flush option on a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_flush(vue.FlushPost)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Set the immediate option on a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_immediate(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

Set the listener for a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })

If you need the new and old values when more than a single value is watched, use the quantity-aware watchX functions along with this.

Set the once option on a watch

 vue.watch_ref(first_name)
 |> vue.and_computed(last_name)
 |> vue.with_once(True)
 |> vue.with_listener(fn(_, _, _) {
   // ...
 })