LinusBorg

<template>
  <form>
    <input type="text" v-model="data.name" />
    <span v-if="errors.name">{errors.name.msg{</span>
    <span v-else>{{capsName}}</span>
    <input type="number" v-model.number="data.age" />
    <span v-if="errors.age">{errors.age.msg{</span>
  </form>
</template>

LinusBorg

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

LinusBorg

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

LinusBorg

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

LinusBorg

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

LinusBorg

About this collection

This gist is a work in progress. It's goal is to collect information about possible pitfalls when using Vue 3's proxy-base reactivity and Typescript, including solutions/remedies/workarounds.

Ultimately, the goal is to turn this into a part of the Vue documentation.

TOC

1. Leaking this from the constructor, i.e. in async operations.
2. ref()/reactive() unwrapping loses private fields type information

LinusBorg

type Primitive = string | number | boolean | bigint | symbol | undefined | null
type Builtin = Primitive | Function | Date | Error | RegExp

type UnReadOnly<T> = {
  -readonly [K in keyof T]:
    T[K] extends Builtin
    ? T[K] 
    : T[K] extends Ref<infer U>
    ? Ref<UnReadOnly<U>>

LinusBorg

# The name for this gist (starts with exclamation mark, because the name of the gist is the name of the first file in ASCIIbetical order)