#Vue Features Compatibility

Vue Lynx is built on the official Vue 3 runtime core (@vue/runtime-core), so you should expect your Vue code to just work. The core rendering path — Composition API, SFCs, reactivity, template directives — works the same way you'd expect from standard Vue, with no Lynx-specific adaptation required.

Below is a feature-by-feature breakdown of the Vue features we've verified on Lynx. Where Lynx-specific caveats exist, they are called out inline. For details on how the dual-thread architecture works under the hood, see Understanding the Dual-Thread Model.

#Reactivity + Composables

Vue Lynx reuses 100% of Vue's reactivity core (@vue/reactivity). Every reactivity API works identically to standard Vue, with no Lynx-specific caveats or adaptations.

The example below demonstrates reactive() + toRefs(), and a useStopwatch() composable that encapsulates reactive state:

#SFC CSS Features

Plain <style> blocks, imported .css files, <style module>, <style scoped>, and v-bind() in CSS all work on Lynx.

v-bind() in <style> requires two config options so the Lynx engine recognizes CSS custom properties in inline styles and cascades them to descendants:

pluginVueLynx({
  enableCSSInlineVariables: true,
  enableCSSInheritance: true,
})

:::

#v-model

Vue's v-model creates two-way bindings. On components, the child uses defineModel() (Vue 3.4+) to declare a model prop, and the parent binds it with v-model. On native <input> and <textarea> elements, v-model works just like standard Vue, including the .lazy, .trim, and .number modifiers.

The example demonstrates:

1. Default model — defineModel<number>() with v-model="count" for a counter
2. Named models — defineModel('title') + defineModel('body') with v-model:title / v-model:body
3. Native input v-model — v-model directly on <input>

#Event Modifiers

Vue's event modifiers (.once, .stop, .self) work on Lynx. .prevent is accepted as a compatibility no-op — see the table below for details.

The example below demonstrates .once, .stop, and .self. The .prevent card explains why no interactive demo is shown for that modifier:

#Slots

Vue slots are the primary composition mechanism for passing template content into child components. Vue Lynx supports default slots, named slots, and scoped slots.

The example below demonstrates all three patterns:

1. Default slot — content projected into a <Card> component
2. Named slots — #header and #footer with fallback content
3. Scoped slot — a <DataList> exposes each item to the parent for custom rendering

#Provide / Inject

Vue's provide and inject APIs let an ancestor component serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is. This avoids prop drilling through intermediate components.

The example below provides a reactive theme ref and a static appName string at the root. A grandchild component injects both — the middle layer passes nothing down.

#Suspense

Vue's <Suspense> displays fallback content while waiting for async components to resolve. On Lynx, <Suspense> works with both async setup() (top-level await in <script setup>) and defineAsyncComponent for deferred loading.

#Transition

Vue's <Transition> and <TransitionGroup> components apply enter/leave animations when elements are inserted or removed.

Since #248 (v0.5), transitions are no longer experimental. Vue Lynx follows Vue's persisted transition behavior for v-show: enter and leave hooks run on every visibility change, and display: none is applied only after the leave animation finishes. This makes patterns such as drawers, sheets, popovers, and other state-preserving overlays behave consistently with official Vue on both Web and native Lynx.

#KeepAlive

Vue's <KeepAlive> caches inactive component instances instead of destroying them. When a component is toggled back in, its state is preserved. The include, exclude, and max props are all supported. The onActivated and onDeactivated lifecycle hooks fire as expected.

#Options API

Vue 3 ships the Options API alongside the Composition API for backward compatibility. By default, Vue Lynx enables it (optionsApi: true in the plugin), but you can disable it to reduce bundle size:

pluginVueLynx({
  optionsApi: false, // tree-shakes the Options API runtime (~9 kB)
})

The example below uses defineComponent with data(), computed, watch, methods, and the mounted lifecycle hook:

#v-once / v-memo

v-once and v-memo work in Vue Lynx without any configuration. On Lynx a cache hit skips the whole cross-thread op batch for that subtree — prefer v-once for never-changing content, and v-memo when a subtree should update only for a short dependency list (common in v-for rows).

For render functions, Vue's withMemo helper (what the compiler emits for v-memo) is re-exported from vue-lynx.

#Teleport

Vue's <Teleport> moves a template fragment to a different place in the UI tree. Vue Lynx supports it for to="#id" string selectors via a background-thread idRegistry lookup — the same pattern as a modal rendered at the page root while its trigger lives deeper in the component tree.

The example below shows a modal teleported to #overlay-root, plus reactive content with the disabled prop:

#The <page> Top-Level Node

Every Lynx screen has one native <page> root. Vue Lynx creates it automatically; write an explicit <page> only when you need to bind a class, style, event, or ref to the root:

<template>
  <page class="app" :style="pageStyle" @tap="onPageTap">
    <view>...</view>
  </page>
</template>

An explicit <page> compiles to a transparent built-in component that applies attributes to the existing native page — it does not create a second one. Use at most one per screen, as the outermost element. Prefer Lynx Engine 3.8.1+ when using an explicit <page>.

#Unsupported Features

Some Vue built-in features are not yet adapted to the dual-thread native environment: