COMPONENT.md

Vue Component API

Vue component actually runs in the React runtime. It means that the VNode used on the react runtime are in fact React Elements. Direct manipulation of a VNode could causes some incompatibilities. Conversely, if your previous Vue component does not involve VNode manipulation, it would most likely run directly in React.

Supported API

All the features strikethrough are not supported in React Native

Global API

Application

• createApp()
• app.provide()
• app.component()
• app.directive()
• app.use()
• app.mixin()
• app.version
• app.config
• app.config.globalProperties
• app.config.errorHandler
• app.config.warnHandler
• app.config.performance
• app.config.compilerOptions
• app.config.optionMergeStrategies
• createSSRApp()
• app.mount()
• app.unmount()

General

• version
• nextTick()
• defineComponent()
• defineAsyncComponent()
• defineCustomElement()

---

Composition API

setup()

• Basic Usage
• Accessing Props
• Setup Context
• Usage with Render Functions

Reactivity: Core

• ref()
• computed()
• reactive()
• readonly()
• watchEffect()
• watchPostEffect()
• watchSyncEffect()
• watch()

Reactivity: Utilities

• isRef()
• unref()
• toRef()
• toRefs()
• isProxy()
• isReactive()
• isReadonly()

Reactivity: Advanced

• shallowRef()
• triggerRef()
• customRef()
• shallowReactive()
• shallowReadonly()
• toRaw()
• markRaw()
• effectScope()
• getCurrentScope()
• onScopeDispose()

Lifecycle Hooks

• onMounted()
• onUpdated()
• onUnmounted()
• onBeforeMount()
• onBeforeUpdate()
• onBeforeUnmount()
• onErrorCaptured()
• onRenderTracked()
• onRenderTriggered()
• onActivated()
• onDeactivated()
• onServerPrefetch()

Dependency Injection

• provide()
• inject()

---

Options API

Options: State

• data
• props
• computed
• methods
• watch
• emits
• expose

Options: Rendering

• render
• template
• compilerOptions

Options: Lifecycle

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted
• errorCaptured
• renderTracked
• renderTriggered
• activated
• deactivated
• serverPrefetch

Options: Composition

• provide
• inject
• mixins
• extends

Options: Misc

• name
• inheritAttrs
• components
• directives

Component Instance

• $data
• $props
• $el
• $options
• $parent

  the parent will only works if it has been passed a prop ($parent) from react native or if the parent element is a vue component

• $root

  the root element of the app should be a non functional component warpped with createApp from vue in order to get a root instance

• $slots
• $refs
• $attrs
• $watch()
• $emit()
• $forceUpdate()
• $nextTick()

---

Built-ins

Directives

• v-text
• v-html
• v-show
• v-if
• v-else
• v-else-if
• v-for
• v-on
• v-bind
• v-model
• v-slot
• v-once
• v-memo
• v-cloak
• v-pre

Components

• <KeepAlive>
• <Suspense>
• <Transition>
• <TransitionGroup>
• <Teleport>

Special Elements

• <component>
• <slot>

Special Attributes

• key
• ref
• is

---

Single-File Component

Syntax Specification

• Overview
• Language Blocks
• Automatic Name Inference
• Pre-Processors
• Comments
• Src Imports

<script setup>

• Basic Syntax
• Reactivity
• Using Components
• Using Custom Directives
• defineProps() & defineEmits()
• defineExpose()
• useSlots() & useAttrs()
• Usage alongside normal <script>
• Top-level await
• TypeScript-only Features
• Restrictions

CSS Features

• Scoped CSS
• CSS Modules
• v-bind() in CSS

---

Single-File Component

Render Function

• h()
• mergeProps()
• cloneVNode()
• isVNode()
• resolveComponent()
• resolveDirective()
• withDirectives()
• withModifiers()

TypeScript Utility Types

• PropType
• ComponentCustomProperties
• ComponentCustomOptions
• ComponentCustomProps
• CSSProperties

Server-Side Rendering

• renderToString()
• renderToNodeStream()
• pipeToNodeWritable()
• renderToWebStream()
• pipeToWebWritable()
• renderToSimpleStream()
• useSSRContext()

Custom Renderer

• createRenderer()