# Vue Lynx

> Vue 3 framework for building Lynx apps

## Guide

- [Quick Start](/guide/quick-start.md): Welcome to Vue Lynx! Let's create a Vue Lynx project and start developing.

## API

- [Class: MainThreadRef<T>](/guide/api/vue-lynx/Class.MainThreadRef.md)
- [Class: ShadowElement](/guide/api/vue-lynx/Class.ShadowElement.md)
- [Function: Transition()](/guide/api/vue-lynx/Function.Transition.md)
- [Function: cloneVNode()](/guide/api/vue-lynx/Function.cloneVNode.md)
- [Function: computed()](/guide/api/vue-lynx/Function.computed.md)
- [Function: createApp()](/guide/api/vue-lynx/Function.createApp.md): Create a Vue Lynx application instance.
- [Function: createElementVNode()](/guide/api/vue-lynx/Function.createElementVNode.md)
- [Function: createPageRoot()](/guide/api/vue-lynx/Function.createPageRoot.md): Create the page root shadow element with the reserved id=1.
- [Function: createVNode()](/guide/api/vue-lynx/Function.createVNode.md)
- [Function: customRef()](/guide/api/vue-lynx/Function.customRef.md): Creates a customized ref with explicit control over its dependency tracking and updates triggering.
- [Function: defineAsyncComponent()](/guide/api/vue-lynx/Function.defineAsyncComponent.md)
- [Function: defineComponent()](/guide/api/vue-lynx/Function.defineComponent.md)
- [Function: defineEmits()](/guide/api/vue-lynx/Function.defineEmits.md)
- [Function: defineExpose()](/guide/api/vue-lynx/Function.defineExpose.md): Vue <script setup> compiler macro for declaring a component's exposed instance properties when it is accessed by a parent component via template refs. <script setup> components are closed by default - i.e. variables inside the <script setup> scope is not exposed to parent unless explicitly exposed via defineExpose. This is only usable inside <script setup>, is compiled away in the output and should not be actually called at runtime.
- [Function: defineModel()](/guide/api/vue-lynx/Function.defineModel.md)
- [Function: defineOptions()](/guide/api/vue-lynx/Function.defineOptions.md): Vue <script setup> compiler macro for declaring a component's additional options. This should be used only for options that cannot be expressed via Composition API - e.g. inheritAttrs.
- [Function: defineProps()](/guide/api/vue-lynx/Function.defineProps.md)
- [Function: defineSlots()](/guide/api/vue-lynx/Function.defineSlots.md)
- [Function: effectScope()](/guide/api/vue-lynx/Function.effectScope.md): Creates an effect scope object which can capture the reactive effects (i.e. computed and watchers) created within it so that these effects can be disposed together. For detailed use cases of this API, please consult its corresponding RFC.
- [Function: getCurrentInstance()](/guide/api/vue-lynx/Function.getCurrentInstance.md)
- [Function: getCurrentScope()](/guide/api/vue-lynx/Function.getCurrentScope.md): Returns the current active effect scope if there is one.
- [Function: guardReactiveProps()](/guide/api/vue-lynx/Function.guardReactiveProps.md)
- [Function: h()](/guide/api/vue-lynx/Function.h.md)
- [Function: hasInjectionContext()](/guide/api/vue-lynx/Function.hasInjectionContext.md): Returns true if inject() can be used without warning about being called in the wrong place (e.g. outside of setup()). This is used by libraries that want to use inject() internally without triggering a warning to the end user. One example is useRoute() in vue-router.
- [Function: inject()](/guide/api/vue-lynx/Function.inject.md)
- [Function: isMemoSame()](/guide/api/vue-lynx/Function.isMemoSame.md)
- [Function: isProxy()](/guide/api/vue-lynx/Function.isProxy.md): Checks if an object is a proxy created by reactive, readonly, shallowReactive or shallowReadonly.
- [Function: isReactive()](/guide/api/vue-lynx/Function.isReactive.md): Checks if an object is a proxy created by reactive or shallowReactive (or ref in some cases).
- [Function: isReadonly()](/guide/api/vue-lynx/Function.isReadonly.md): Checks whether the passed value is a readonly object. The properties of a readonly object can change, but they can't be assigned directly via the passed object. The proxies created by readonly and shallowReadonly are both considered readonly, as is a computed ref without a set function.
- [Function: isRef()](/guide/api/vue-lynx/Function.isRef.md): Checks if a value is a ref object.
- [Function: isShallow()](/guide/api/vue-lynx/Function.isShallow.md)
- [Function: isVNode()](/guide/api/vue-lynx/Function.isVNode.md)
- [Function: markRaw()](/guide/api/vue-lynx/Function.markRaw.md): Marks an object so that it will never be converted to a proxy. Returns the object itself.
- [Function: mergeProps()](/guide/api/vue-lynx/Function.mergeProps.md)
- [Function: nextTick()](/guide/api/vue-lynx/Function.nextTick.md): Wait for the next DOM update flush and the main-thread ops acknowledgement. Unlike standard Vue's nextTick which only waits for the scheduler flush, Vue Lynx's version also waits for the main thread to apply the ops, so native Lynx elements are fully materialised when the callback fires. Caveat: some Lynx builds never invoke the callLepusMethod callback that carries the acknowledgement. Until the engine has delivered one real acknowledgement, each flush falls back to a short timer so nextTick() cannot hang forever — on such engines the materialisation guarantee is best-effort (a dev-mode warning is logged when the fallback fires). Once a real acknowledgement has been observed, the strict guarantee applies.
- [Function: normalizeClass()](/guide/api/vue-lynx/Function.normalizeClass.md)
- [Function: normalizeProps()](/guide/api/vue-lynx/Function.normalizeProps.md)
- [Function: normalizeStyle()](/guide/api/vue-lynx/Function.normalizeStyle.md)
- [Function: onActivated()](/guide/api/vue-lynx/Function.onActivated.md)
- [Function: onBeforeMount()](/guide/api/vue-lynx/Function.onBeforeMount.md)
- [Function: onBeforeUnmount()](/guide/api/vue-lynx/Function.onBeforeUnmount.md)
- [Function: onBeforeUpdate()](/guide/api/vue-lynx/Function.onBeforeUpdate.md)
- [Function: onDeactivated()](/guide/api/vue-lynx/Function.onDeactivated.md)
- [Function: onErrorCaptured()](/guide/api/vue-lynx/Function.onErrorCaptured.md)
- [Function: onMounted()](/guide/api/vue-lynx/Function.onMounted.md)
- [Function: onRenderTracked()](/guide/api/vue-lynx/Function.onRenderTracked.md)
- [Function: onRenderTriggered()](/guide/api/vue-lynx/Function.onRenderTriggered.md)
- [Function: onScopeDispose()](/guide/api/vue-lynx/Function.onScopeDispose.md): Registers a dispose callback on the current active effect scope. The callback will be invoked when the associated effect scope is stopped.
- [Function: onUnmounted()](/guide/api/vue-lynx/Function.onUnmounted.md)
- [Function: onUpdated()](/guide/api/vue-lynx/Function.onUpdated.md)
- [Function: onWatcherCleanup()](/guide/api/vue-lynx/Function.onWatcherCleanup.md): Registers a cleanup callback on the current active effect. This registered cleanup callback will be invoked right before the associated effect re-runs.
- [Function: provide()](/guide/api/vue-lynx/Function.provide.md)
- [Function: reactive()](/guide/api/vue-lynx/Function.reactive.md): Returns a reactive proxy of the object. The reactive conversion is "deep": it affects all nested properties. A reactive object also deeply unwraps any properties that are refs while maintaining reactivity.
- [Function: readonly()](/guide/api/vue-lynx/Function.readonly.md): Takes an object (reactive or plain) or a ref and returns a readonly proxy to the original. A readonly proxy is deep: any nested property accessed will be readonly as well. It also has the same ref-unwrapping behavior as reactive, except the unwrapped values will also be made readonly.
- [Function: ref()](/guide/api/vue-lynx/Function.ref.md)
- [Function: runOnBackground()](/guide/api/vue-lynx/Function.runOnBackground.md): Call a Background Thread function from a 'main thread' worklet. At build time the SWC transform replaces all runOnBackground(fn) call sites. This export exists only for TypeScript import resolution — it is never called at runtime on the BG thread.
- [Function: runOnMainThread()](/guide/api/vue-lynx/Function.runOnMainThread.md): Mark a function to be executed on the Main Thread. Returns a wrapper that, when called from the Background Thread, dispatches the call to the Main Thread via the worklet runtime and returns a Promise that resolves to the function's return value. The SWC worklet transform replaces the fn argument with a worklet context object at build time. Without the transform, fn is passed through as-is (dev warning in non-production builds).
- [Function: shallowReactive()](/guide/api/vue-lynx/Function.shallowReactive.md): Shallow version of reactive. Unlike reactive, there is no deep conversion: only root-level properties are reactive for a shallow reactive object. Property values are stored and exposed as-is - this also means properties with ref values will not be automatically unwrapped.
- [Function: shallowReadonly()](/guide/api/vue-lynx/Function.shallowReadonly.md): Shallow version of readonly. Unlike readonly, there is no deep conversion: only root-level properties are made readonly. Property values are stored and exposed as-is - this also means properties with ref values will not be automatically unwrapped.
- [Function: shallowRef()](/guide/api/vue-lynx/Function.shallowRef.md)
- [Function: takeOps()](/guide/api/vue-lynx/Function.takeOps.md)
- [Function: toRaw()](/guide/api/vue-lynx/Function.toRaw.md): Returns the raw, original object of a Vue-created proxy. toRaw() can return the original object from proxies created by reactive, readonly, shallowReactive or shallowReadonly. This is an escape hatch that can be used to temporarily read without incurring proxy access / tracking overhead or write without triggering changes. It is not recommended to hold a persistent reference to the original object. Use with caution.
- [Function: toRef()](/guide/api/vue-lynx/Function.toRef.md)
- [Function: toRefs()](/guide/api/vue-lynx/Function.toRefs.md): Converts a reactive object to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object. Each individual ref is created using toRef.
- [Function: toValue()](/guide/api/vue-lynx/Function.toValue.md): Normalizes values / refs / getters to values. This is similar to unref, except that it also normalizes getters. If the argument is a getter, it will be invoked and its return value will be returned.
- [Function: transformToWorklet()](/guide/api/vue-lynx/Function.transformToWorklet.md)
- [Function: triggerRef()](/guide/api/vue-lynx/Function.triggerRef.md): Force trigger effects that depends on a shallow ref. This is typically used after making deep mutations to the inner value of a shallow ref.
- [Function: unref()](/guide/api/vue-lynx/Function.unref.md): Returns the inner value if the argument is a ref, otherwise return the argument itself. This is a sugar function for val = isRef(val) ? val.value : val.
- [Function: useAttrs()](/guide/api/vue-lynx/Function.useAttrs.md)
- [Function: useGlobalEvent()](/guide/api/vue-lynx/Function.useGlobalEvent.md): Registers a listener on Lynx's global event emitter for the current scope.
- [Function: useId()](/guide/api/vue-lynx/Function.useId.md)
- [Function: useMainThreadRef()](/guide/api/vue-lynx/Function.useMainThreadRef.md): Create a MainThreadRef — a ref whose .value is reactive (read-only) on the Background Thread and whose .current is read-write on the Main Thread inside worklet functions.
- [Function: useModel()](/guide/api/vue-lynx/Function.useModel.md)
- [Function: useSlots()](/guide/api/vue-lynx/Function.useSlots.md)
- [Function: useTemplateRef()](/guide/api/vue-lynx/Function.useTemplateRef.md)
- [Function: watch()](/guide/api/vue-lynx/Function.watch.md)
- [Function: watchEffect()](/guide/api/vue-lynx/Function.watchEffect.md)
- [Function: watchPostEffect()](/guide/api/vue-lynx/Function.watchPostEffect.md)
- [Function: watchSyncEffect()](/guide/api/vue-lynx/Function.watchSyncEffect.md)
- [Function: withDefaults()](/guide/api/vue-lynx/Function.withDefaults.md): Vue <script setup> compiler macro for providing props default values when using type-based defineProps declaration. Example usage: This is only usable inside <script setup>, is compiled away in the output and should not be actually called at runtime.
- [Function: withDirectives()](/guide/api/vue-lynx/Function.withDirectives.md): Adds directives to a VNode.
- [Function: withMemo()](/guide/api/vue-lynx/Function.withMemo.md)
- [Function: withModifiers()](/guide/api/vue-lynx/Function.withModifiers.md): Wraps an event handler with Lynx event modifiers. Supported modifiers: .once    — handler is invoked at most once; subsequent events are ignored.stop    — registers the event as catchEvent (native Lynx stop-propagation) and also calls event.stopPropagation() for DOM environments.prevent — accepted for code portability; no-op on Lynx (no browser default actions exist).self    — skips the handler unless the event target is the listener element The wrapped function is cached on fn._withMods keyed by the modifier string so that stable function references survive re-renders. .stop sets _lynxCatch = true on the wrapper so that patchProp can register the event as catchEvent — the native Lynx mechanism for stopping event bubbling. Calling stopPropagation() at the JS level alone is not sufficient because native Lynx bubbling is decided before JS handlers run.
- [Interface: App<HostElement>](/guide/api/vue-lynx/Interface.App.md)
- [Interface: ComponentInternalInstance](/guide/api/vue-lynx/Interface.ComponentInternalInstance.md): We expose a subset of properties on the internal instance as they are useful for advanced external libraries and tools.
- [Interface: ComputedRef<T>](/guide/api/vue-lynx/Interface.ComputedRef.md)
- [Interface: FunctionalComponent()<P, E, S, EE>](/guide/api/vue-lynx/Interface.FunctionalComponent.md)
- [Interface: Ref<T, S>](/guide/api/vue-lynx/Interface.Ref.md)
- [Interface: VNode<HostNode, HostElement, ExtraProps>](/guide/api/vue-lynx/Interface.VNode.md)
- [Interface: VueLynxApp](/guide/api/vue-lynx/Interface.VueLynxApp.md): A Vue Lynx application instance returned by createApp.
- [Interface: WatchHandle()](/guide/api/vue-lynx/Interface.WatchHandle.md)
- [Interface: WatchOptions<Immediate>](/guide/api/vue-lynx/Interface.WatchOptions.md)
- [Interface: WritableComputedRef<T, S>](/guide/api/vue-lynx/Interface.WritableComputedRef.md)
- [Type Alias: Component<PropsOrInstance, RawBindings, D, C, M, E, S>](/guide/api/vue-lynx/TypeAlias.Component.md): A type used in public APIs where a component type is expected. The constructor type is an artificial type returned by defineComponent().
- [Type Alias: ComponentPublicInstance<P, B, D, C, M, E, PublicProps, Defaults, MakeDefaultsOptional, Options, I, S, Exposed, TypeRefs, TypeEl>](/guide/api/vue-lynx/TypeAlias.ComponentPublicInstance.md)
- [Type Alias: DeepReadonly<T>](/guide/api/vue-lynx/TypeAlias.DeepReadonly.md)
- [Type Alias: DefineComponent<PropsOrPropOptions, RawBindings, D, C, M, Mixin, Extends, E, EE, PP, Props, Defaults, S, LC, Directives, Exposed, Provide, MakeDefaultsOptional, TypeRefs, TypeEl>](/guide/api/vue-lynx/TypeAlias.DefineComponent.md)
- [Type Alias: Directive<HostElement, Value, Modifiers, Arg>](/guide/api/vue-lynx/TypeAlias.Directive.md)
- [Type Alias: EmitsOptions](/guide/api/vue-lynx/TypeAlias.EmitsOptions.md)
- [Type Alias: ExtractPropTypes<O>](/guide/api/vue-lynx/TypeAlias.ExtractPropTypes.md): Extract prop types from a runtime props options object. The extracted types are internal - i.e. the resolved props received by the component. Boolean props are always presentProps with default values are always present To extract accepted props from the parent, use ExtractPublicPropTypes.
- [Type Alias: InjectionKey<T>](/guide/api/vue-lynx/TypeAlias.InjectionKey.md)
- [Type Alias: MaybeRef<T>](/guide/api/vue-lynx/TypeAlias.MaybeRef.md)
- [Type Alias: MaybeRefOrGetter<T>](/guide/api/vue-lynx/TypeAlias.MaybeRefOrGetter.md)
- [Type Alias: Plugin<Options, P>](/guide/api/vue-lynx/TypeAlias.Plugin.md)
- [Type Alias: PropType<T>](/guide/api/vue-lynx/TypeAlias.PropType.md)
- [Type Alias: Reactive<T>](/guide/api/vue-lynx/TypeAlias.Reactive.md)
- [Type Alias: SetupContext<E, S>](/guide/api/vue-lynx/TypeAlias.SetupContext.md)
- [Type Alias: ShallowRef<T, S>](/guide/api/vue-lynx/TypeAlias.ShallowRef.md)
- [Type Alias: SlotsType<T>](/guide/api/vue-lynx/TypeAlias.SlotsType.md)
- [Type Alias: UnwrapNestedRefs<T>](/guide/api/vue-lynx/TypeAlias.UnwrapNestedRefs.md)
- [Type Alias: UnwrapRef<T>](/guide/api/vue-lynx/TypeAlias.UnwrapRef.md)
- [Type Alias: VNodeChild](/guide/api/vue-lynx/TypeAlias.VNodeChild.md)
- [Type Alias: VNodeRef](/guide/api/vue-lynx/TypeAlias.VNodeRef.md)
- [Type Alias: WatchStopHandle()](/guide/api/vue-lynx/TypeAlias.WatchStopHandle.md)
- [Variable: Comment](/guide/api/vue-lynx/Variable.Comment.md)
- [Variable: Fragment()](/guide/api/vue-lynx/Variable.Fragment.md)
- [Variable: KeepAlive()](/guide/api/vue-lynx/Variable.KeepAlive.md)
- [Variable: Page](/guide/api/vue-lynx/Variable.Page.md): Transparent runtime representation of an explicit <page> wrapper. Lynx creates the native page before Background JS starts. This component applies the wrapper's attributes to that existing root and renders only its children, so Vue never asks the Main Thread to create a second page. Exactly one wrapper owns the root at a time. When the owner unmounts (or is deactivated by <KeepAlive>), ownership is handed to the next waiting wrapper — this keeps replacement flows working where the incoming page mounts before the outgoing one unmounts (<Transition> without out-in, <Suspense>, route swaps).
- [Variable: Suspense()](/guide/api/vue-lynx/Variable.Suspense.md)
- [Variable: Teleport()](/guide/api/vue-lynx/Variable.Teleport.md)
- [Variable: Text](/guide/api/vue-lynx/Variable.Text.md)
- [Variable: TransitionGroup](/guide/api/vue-lynx/Variable.TransitionGroup.md)
- [Variable: mergeModels](/guide/api/vue-lynx/Variable.mergeModels.md)
- [Variable: nodeOps](/guide/api/vue-lynx/Variable.nodeOps.md)
- [Variable: vModelCheckbox](/guide/api/vue-lynx/Variable.vModelCheckbox.md)
- [Variable: vModelRadio](/guide/api/vue-lynx/Variable.vModelRadio.md)
- [Variable: vModelSelect](/guide/api/vue-lynx/Variable.vModelSelect.md)
- [Variable: vModelText](/guide/api/vue-lynx/Variable.vModelText.md)
- [Variable: vShow](/guide/api/vue-lynx/Variable.vShow.md): Vue Lynx implementation of the v-show directive. Toggles the element's visibility by setting display: none on the native Lynx element's style. Unlike the DOM version, this operates on ShadowElement and sends style ops to the main thread.
- [Variable: version](/guide/api/vue-lynx/Variable.version.md)
- [vue-lynx](/guide/api/vue-lynx/index.md): Welcome to the API reference for vue-lynx, the package that provides the Vue 3 framework for building Lynx apps. For an introduction, see the Getting Started guide.

## Other

- [7 GUIs](/guide/7guis.md): To verify that Vue Lynx behaves identically to Vue in real GUI scenarios, we forked the 7 GUIs examples from the official Vue.js documentation — seven classic tasks that cover typical challenges in GUI programming, from a simple counter to a full spreadsheet.
- [AI Chat](/guide/ai-chat.md): A full-featured AI chatbot ported feature-by-feature from the official Nuxt AI Chatbot template (Nuxt UI + Vercel AI SDK) — probably the most demanding "real-world" validation of Vue Lynx so far: streaming responses with thinking/reasoning, markdown with highlighted code blocks and tables, tool-call cards (weather, charts, web-search sources), chat history with date grouping, votes, message editing, share/rename/delete flows, a model picker, persisted runtime theming with light/dark mode, attachments, fuzzy command-palette search, and a responsive mobile layout with a slide-over sidebar. Try the quick prompts below — "What is the weather in Bordeaux?" streams a reasoning section and a weather card; "Show me a chart of sales data" renders an SVG line chart; "Help me create a Vue composable" shows markdown with highlighted code. Scan the QR code in the native tab to run the same bundle in LynxExplorer. The playground above runs fully self-contained: the app probes for its API server and, when unreachable, falls back to an in-app demo backend with the same seeded history and deterministic mock AI streams. When you run the example locally with pnpm dev:server, the same UI talks to a standalone Node server that reimplements the Nuxt template's API routes — and streams real models through the Vercel AI Gateway if you set AI_GATEWAY_API_KEY.
- [Function: pluginVueLynx()](/guide/api/plugin/Function.pluginVueLynx.md): Create rsbuild / rspeedy plugins for Vue-Lynx dual-thread rendering. Returns an array of two plugins: @rsbuild/plugin-vue — Vue SFC support (rspack-vue-loader + VueLoaderPlugin)lynx:vue — Lynx dual-thread entry splitting, PAPI bootstrap, and CSS handling
- [Interface: PluginVueLynxOptions](/guide/api/plugin/Interface.PluginVueLynxOptions.md): Options for pluginVueLynx.
- [Variable: LAYERS](/guide/api/plugin/Variable.LAYERS.md): Webpack module layers used to separate the dual-thread bundles.
- [vue-lynx/plugin](/guide/api/plugin/index.md): A rsbuild / rspeedy plugin that integrates Vue 3 with Lynx's dual-thread architecture (Background Thread renderer + Main Thread PAPI executor).
- [Function: cleanup()](/guide/api/testing-library/Function.cleanup.md)
- [Function: fireEvent()](/guide/api/testing-library/Function.fireEvent.md): Fire a raw DOM event on a JSDOM element. Switches to BG thread before dispatching so event handlers run on BG.
- [Function: getQueriesForElement()](/guide/api/testing-library/Function.getQueriesForElement.md)
- [Function: render()](/guide/api/testing-library/Function.render.md)
- [Function: waitForUpdate()](/guide/api/testing-library/Function.waitForUpdate.md): Wait for all pending Vue reactive updates to flush through the pipeline. Use this after programmatic state changes (ref.value = X) that happen outside of event handlers.
- [Function: within()](/guide/api/testing-library/Function.within.md)
- [Interface: RenderResult](/guide/api/testing-library/Interface.RenderResult.md)
- [Variable: eventMap](/guide/api/testing-library/Variable.eventMap.md)
- [Variable: screen](/guide/api/testing-library/Variable.screen.md)
- [vue-lynx/testing-library](/guide/api/testing-library/index.md): Vue Lynx Testing Library provides simple utilities for testing Vue 3 Lynx components in a Node.js environment. It renders components through the full dual-thread pipeline (Background Thread renderer → Main Thread native elements → JSDOM) so your tests exercise the same code path as production. Inspired by Vue Testing Library and @lynx-js/react/testing-library For setup instructions and examples, see the VueLynx Testing Library guide.
- [Vue Query](/guide/data-fetching.md): Lynx provides the Fetch API for making network requests. While you can use fetch() directly, we recommend TanStack Query (Vue Query) for managing server state — it handles caching, background refetching, stale data, and mutations out of the box. See also: Lynx — Networking
- [Elk — a Mastodon Client](/guide/elk.md): To prove Vue Lynx can carry a real product-grade app, we ported Elk — the beloved Mastodon web client by Anthony Fu and team — into a native Mastodon client. It browses any public Mastodon instance as a guest (default mas.to): timelines, threads, profiles, search, trends, dark mode and more. Try it below. The Web tab runs the real app on Lynx for Web against a live instance; the QR Code tab runs the same main.lynx.bundle natively — scan it with Lynx Go / Lynx Explorer (see Quick Start to install one). <Go example="elk" defaultFile="src/App.vue" schema="{{{url}}}?fullscreen=true&bar_color=fafafa&bg_color=fafafa" /> Native viewpager variant <Badge text="newer Lynx engine" type="warning" /> The elk-viewpager fork backs the Explore and Notifications tabs with the native <viewpager> element instead of conditionally rendered panes. In TabPager.vue each pane is a <viewpager-item>: panes swipe horizontally with a native snap animation, keep content and scroll position across swipes, and the tab bar syncs both ways — a swipe fires the pager's change event (→ active tab), a tab tap calls its selectTab method (→ animate to that page). It feels much closer to a native client. <viewpager> is a Lynx XElement, registered under a different tag per platform, so TabPager.vue picks the tag at runtime from SystemInfo.platform (highlighted below): <x-viewpager-ng> on Lynx for Web, the extracted <viewpager> / <viewpager-item> on native OSS engines. <Go example="elk-viewpager" defaultFile="src/components/TabPager.vue" schema="{{{url}}}?fullscreen=true&bar_color=fafafa&bg_color=fafafa" highlight={{ 'src/components/TabPager.vue': '{12-18,40-56,72-87}', }} /> How much code does the native upgrade take? Almost none. Moving the whole app onto the native pager touches three files: the new TabPager.vue plus the two pages with swipeable tabs (ExplorePage.vue, NotificationsPage.vue). The other ~55 source files — masto.js client, content renderer, router, virtualized <list> — are byte-for-byte identical. At the call site it's a straight swap. The hand-rolled tab bar and v-if / v-else-if panes, where only the active pane exists: …become a component with one named slot per pane: That v-if → slot rewrite is the whole UI-side story — tab bar, underline animation, and pager ↔ tab sync all move into TabPager. One change isn't mechanical, and it captures what "native paging" really means. With v-if, only the visible pane exists, so a single shared paginator was enough. With the pager, every pane is mounted at once and swipeable — so each tab keeps its own data and scroll position. Notifications goes from one shared feed to one per tab: That's the trade: you give up "render only what's visible," and the panes stay warm — swipe away and back, and you're exactly where you left off, no reload.
- [HackerNews](/guide/hackernews.md): To better test that all ecosystem ingredients can work together, we forked Evan You's classic Vue HackerNews 2.0 as a "real-world" validation benchmark for Vue Lynx. Since Vue Lynx is built on Vue 3, we used the Vue HackerNews 3.0 community port as our reference as well. This port validates four mainstream ecosystem libraries working together: Vue Router, Pinia, TanStack Vue Query, and Tailwind CSS. Tailwind CSS Version In the first iteration, we had AI rewrite the styles using Tailwind CSS (@lynx-js/tailwind-preset). CSS Version For this version, we had AI reuse the original SCSS files from the reference implementation as much as possible. Interestingly, the CSS version maintains the max-width centered layout from the reference on desktop. Try clicking the "fullscreen" button below to see this in action. Both HackerNews variants intentionally keep an explicit outermost <page>. Vue Lynx forwards that wrapper's classes, styles, and events to the single native page root; it does not create another native element. This lets the examples exercise root-level Tailwind and SCSS styling in LynxExplorer.
- [What is Vue Lynx?](/guide/introduction.md): Vue Lynx is a Vue 3 custom renderer for Lynx, enabling you to build native Lynx applications using Vue's familiar Composition API, single-file components, and reactive data model. If you know Vue 3 and are familiar with Lynx, you already know how to use Vue Lynx.
- [Main Thread Script](/guide/main-thread-script.md): The Main Thread Script is a JS script that can be executed on the main thread. The most common use cases are smooth animations and gesture handling. It addresses the response delay inherent in Lynx's multi-threaded architecture, aiming to achieve a near-native interactive experience.
- [Using Pinia](/guide/pinia.md): Pinia is the official state management library for Vue. It provides a type-safe, extensible, and modular store with an intuitive API built on the Composition API. See also: Vue.js — State Management
- [Using Vue Router](/guide/routing.md): Vue Lynx applications can use Vue Router, the official routing library for Vue, to manage navigation between views. However, since Lynx has no browser window.location or History API, you must use createMemoryHistory() instead of createWebHistory() — similar to how React Router provides a MemoryRouter or TanStack Router provides a memory history for non-browser environments.
- [Using Tailwind CSS](/guide/tailwindcss.md): Tailwind CSS is a utility-first CSS framework. Combined with Vue Lynx, it lets you build native Lynx UIs using the same utility classes you already know from the web. This guide walks through integrating Tailwind CSS with Vue Lynx, from basic setup to a design-token system with runtime theme switching — inspired by shadcn/ui.
- [VueLynx Testing Library](/guide/testing-library.md): The vue-lynx-testing-library package offers APIs like render, fireEvent, and getByText for testing Vue Lynx components, similar to Vue Test Utils and React Testing Library, with the dual-threaded architecture abstracted through @lynx-js/testing-environment.
- [TodoMVC](/guide/todomvc.md): TodoMVC is the canonical benchmark for comparing JavaScript frameworks. We ported it as our first validation target to verify whether we can fully reuse the Vue 3 core and implement a dual-thread rendering pipeline on top of the Custom Renderer API to connect with Lynx's native engine.
- [Tutorial: Product Gallery](/guide/tutorial-gallery.md): We will build a product gallery page together during this tutorial using Vue 3 and Lynx. This tutorial does not assume any existing Lynx knowledge. The techniques you'll learn in the tutorial are fundamental to building any Lynx pages and applications.
- [Tutorial: Product Detail](/guide/tutorial-swiper.md): This tutorial walks you through building a high-performance product detail page with Vue 3 and Lynx, centered around a touch-swipeable image carousel. You will learn: Building a Static Layout: Using v-for and Lynx's display: linear to create a horizontal scroll structureListening to Touch Events: Handling touch events on the background thread and updating node stylesUsing Main Thread Script to Reduce Latency: Eliminating cross-thread round-trip delay with the 'main thread' directiveOrganizing Code with Composables: Extracting touch logic and style updates into reusable composablesAdding Snap-to-Page Animation: Main-thread requestAnimationFrame-based animationCommunication Between Main Thread and Background Thread: Cross-thread function calls with runOnBackground and runOnMainThreadValues Across Main Thread and Background Thread: Passing numeric values and main-thread functions between threads
- [TypeScript](/guide/typescript.md): Vue Lynx supports TypeScript out of the box. Since Vue Lynx is built on the standard Vue 3 runtime, all of Vue's TypeScript features work as documented in the Vue TypeScript guide -- <script lang="ts">, defineComponent(), template type checking, and so on. This page covers what's specific to Vue Lynx: type declarations for Lynx built-in elements and a Volar plugin for correct IDE resolution.
- [Vue Features Compatibility](/guide/vue-compatibility.md): 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.