#Vue Features Compatibility

Because Vue Lynx is built on the official Vue 3 runtime core, it aims to support the full Vue 3 API surface out of the box. The core rendering path — Composition API, SFCs, reactivity, template directives — works the same way you'd expect from standard Vue.

That said, Vue's API surface is large and we haven't had time to fully verify every corner of it. Below are critical Vue features that we've confirmed work effortlessly on Lynx — most require zero adaptation from a standard Vue codebase. Where Lynx-specific caveats exist, they are called out inline.

#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, and <style module> all work on Lynx. <style scoped> and v-bind() in CSS are not yet supported — vote on #78 and #79 if you need them.

<script setup>
const color = ref('#1565c0')
const style = computed(() => ({ color: color.value }))
</script>
<template>
  <text :style="style">Dynamic color</text>
</template>

#Component v-model

Vue's v-model on components creates a two-way binding between parent and child. The child uses defineModel() (Vue 3.4+) to declare a model prop, and the parent binds it with v-model.

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. Manual input binding — the workaround for native <input> (see caveat below)

<input :value="text" @input="(e) => text = e.detail.value" />

#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 lazy-loading.

#Transition

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

#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:

#Unsupported Features

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