vue-lynx

vue-lynx

Vue 3 custom renderer for building Lynx apps.

[!WARNING] Pre-Alpha — Expect bugs and enjoy!

Documentation

Visit vue.lynxjs.org for full documentation, including:

• Introduction
• Quick Start
• Gallery Tutorial
• Swiper Tutorial

IDE Setup

Install the Vue Language Features (Volar) extension for VS Code, or the equivalent for your editor (Zed has built-in Vue support via its Vue extension).

Add the following to your tsconfig.json (or jsconfig.json for JS projects):

{
  "compilerOptions": {
    "types": ["vue-lynx/types"]
  },
  "vueCompilerOptions": {
    "plugins": ["vue-lynx/types/volar-plugin"]
  }
}

This enables:

• Correct prop types and completions for all Lynx elements (<view>, <text>, <image>, etc.)
• IDE errors when using unsupported event modifiers (.capture, .passive)
• Type-checked global-bind*, global-catch*, and main-thread-* props

Projects created with create-vue-lynx have this pre-configured.

Examples

See the examples/ directory for complete working examples:

• hello-world — Minimal starter
• basic — Core features (events, refs, reactivity)
• reactivity — reactive(), toRefs(), and composables
• todomvc — TodoMVC with CSS Selectors
• option-api — Options API style
• vue-router — Vue Router integration
• pinia — Pinia state management
• suspense — Suspense API
• tailwindcss — Tailwind CSS styling
• gallery — Photo gallery
• swiper — Swiper component
• 7guis — 7GUIs benchmark tasks

Contributing

git clone https://github.com/Huxpro/vue-lynx.git
cd vue-lynx
pnpm install
pnpm build

Scripts

Run examples locally

cd examples/basic
pnpm install
pnpm dev

License

Apache-2.0