Earlier this month, ByteDance—the company behind TikTok and CapCut—introduced Lynx.js to the world. This could be big news for the Vue community, as it may enable native app development with Vue!

Lynx is a UI framework built on JavaScript that allows developers to build both web and mobile applications that feel native thereby fulfilling the “write once, run anywhere” dream frontend/UI developers have pursued for a long time.

Now, you’ve most likely heard of cross-platform UI frameworks before, so why should this one matter? In this article, we’ll explore Lynx, how it works, and what it means for the future of native mobile apps built with Vue.

---

History of Mobile development with Vue

Before we get into Lynx and why this is an exciting update for the Vue community to keep an eye on, it’s important to discuss other cross-platform solutions that currently exist in the Vue ecosystem.

1. Nativescript-Vue

NativeScript-Vue allows developers to create native mobile applications using Vue and Nativescript. It provides direct access to native APIs and platform-specific functionalities while maintaining the familiar Vue syntax and development patterns. Nativescript Vue has been around since 2018 and is fully open source.

2. Ionic Vue with Capacitor

Ionic Vue combines the power of the Ionic Framework with Vue.js to create cross-platform applications using web technologies. While not strictly “native”, Ionic Vue applications can access native device features through Capacitor plugins, making it a popular choice for hybrid mobile development and mobile web/pwa solutions.

3. Quasar Framework

Quasar is an open-source Vue.js framework that enables developers to build applications for multiple platforms including web, mobile, and even desktop (through Electron) using a single codebase. It provides a rich set of Vue components and utilities, along with built-in support for PWA, Capacitor, and Electron, making it a versatile choice for cross-platform development.

While these are all great options for building cross-platform apps using Vue, they all come with their many challenges. Native-script uses webpack and doesn’t support modern development tooling like Vite and Rspack by default, Ionic Vue is great for web-like experiences but doesn’t always deliver truly native performance and feel, which is a big deal today. And Quasar, despite its comprehensive feature set, can have a steeper learning curve due to its all-in-one approach.

These challenges have created opportunity for innovation, particularly in achieving a balance between developer experience and native performance. That’s why Lynx, with its fresh perspective on cross-platform development, shows such promise.

---

Why Lynx for Mobile Vue Apps?

In the official documentation, Lynx is referred to as an alternative web tailored for app development. Let’s look at some key features that make Lynx a compelling option for Vue developers looking to build performant and scalable mobile applications.

1. Lynx is Performance Driven

Lynx is built for performance-first mobile applications and uses a dual-threaded architecture which means that key tasks during development are separated into multiple threads. Namely, the UI/main thread and the Application/Background thread.

Let’s break down these terms:

The UI/main thread: This is primarily responsible for rendering the user interface, and handling synchronous UI tasks like event handling. The UI thread is powered by a custom JS engine called Prim JS which was built and optimized specifically for Lynx. It also uses Rspeedy (a toolchain based on the popular Rust-based bundler Rspack).

The Background thread: This handles your application logic, such as data processing, API calls, and state management.

By separating these two threads, Lynx makes for a more fluid user experience where complex background tasks with heavy computations don’t block the main thread, thus resulting in instant first frame rendering for the end user.

This performance improvement can already be seen powering some parts of the Tiktok ecosystem such as its search, studio, and live.

2. Lynx takes a Web-first Approach

Another core feature of Lynx is that it remains true to its web-first approach. Lynx allows you to bring along your existing web development knowledge of building UIs with markup (HTML-like syntax) and native CSS just as you would for the web.

It takes it a step further by offering direct support for modern CSS features and visual effects like gradients, clipping and masking.

3. Lynx uses Components

Lynx encourages the component way of building UIs as seen in modern JS frameworks like Vue.

This component-based architecture promotes code reusability and maintainability. Developers can create encapsulated, reusable pieces of UI that manage their own state, making it easier to build and scale complex applications.

4. Lynx is framework and platform agnostic

Unlike React Native, Lynx takes a framework-agnostic approach. Lynx’s architecture allows for integration with other popular frontend frameworks like Vue. According to the announcement blog post, frameworks other than React already account for roughly half of Lynx’s total usage.

This design decision opens up possibilities for the Vue community to leverage Lynx’s powerful features while maintaining their preferred development environment.

Lynx is not only framework agnostic but also platform agnostic in terms of host platforms and rendering backends. This flexibility allows Lynx to expand to various platforms, including desktop computers, TVs, and IoT devices.

---

Vue + Lynx

Lynx launched with support for React (ReactLynx) as their initial frontend framework, and since then there has been a lot of discussions around creating its Vue counterpart.

The most popular of these discussions came from this post on X by Evan You (founder of Vue.js) where he states that the Vue team would be happy to support anyone willing to work on a Vue on Lynx integration.

Xuan Huang, a software engineer on the Lynx team and author of the blog post that announced Lynx also shared the team’s plans to have Vue on Lynx

And in less than 24hrs, Rahul Vashishtha, a member of the Vue community, had started working on a prototype for the project.

Although, for now, it’s just a prototype, we believe the Vue community will really benefit from a VueLynx integration.

One of Vue’s enduring strengths that fueled its rapid adoption—both in its early days and today—is its familiar syntax, mirroring standard HTML and CSS, which significantly eased the learning curve. Lynx extends this advantage, providing a similarly intuitive coding environment that minimizes the learning curve for developers already proficient in Vue.

Although, there’s no official Vue integration yet, you can already start integrating Lynx with your existing Vue app.

Example Vue + Lynx Code

Here is an example of what Vue + Lynx code may look like. This example code is from the Github prototype.

<script>
import lynxLogo from './assets/lynx-logo.png'

export default {
  data() {
    return {
      title: "Hello VueLynx",
      message: "Welcome to Vue 3 in Lynx!",
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>
<template>
  <view>
    <image :src="lynxLogo" className='Logo--lynx' />
    <text className='Title'>Vue</text>
    <text className='Subtitle'>on Lynx</text>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="increment">Count: {{ count }}</button>
  </view>
</template>

This code takes the usual script (with options API) and template format and the only noticeable change here is in the template where we use Lynx-specific markup such as <view> which is often used for layout capabilities, stylization, and wrapping other elements, the <text> element is used to display text content and the <image> element to display images.

These elements are rendered by Lynx into native UI components for iOS, Android, and web platforms. The relationship between platform-specific views and Lynx elements helps developers understand how to structure their components within this framework

Vue + Lynx will become a reality after the following build steps have been completed:

1. Make Vue compiler work with rspeedy: This step will compile Vue’s SFC to Lynx dual-thread compatible format splitting the <template> code to the main thread and <script> code to background thread, extracting style code to the main thread, injecting @lynx-js/css-extract-webpack-plugin, and applying runtime code like hot module reload
2. The addition of a new package like vue/runtime-lynx: This step is necessary to rewrite Vue’s DOM operation/runtime code to run on Lynx’s Element API.
3. Implement compile-time tools to split code into two threads: This requires additional API change to Vue like supporting <script main> to compile code to main thread script.

---

What’s Next for Vue + Lynx?

This new JS framework seems to have a lot of promise, especially considering its use and implementation on an app like Tiktok, with over 1 billion users globally.

However, it’s important to note that Lynx is still in its very early stages with no ecosystem, devtools or proper documentation yet. And although it’s said to be “production-ready”, the development team doesn’t recommend that you build your entire app from scratch using the framework, but rather integrate it with already existing apps.

The development of Vue + Lynx represents an exciting opportunity for Vue developers to build truly native mobile applications while leveraging their existing web development skills. As the ecosystem grows, we can expect to see more tools, components, and best practices emerge that will make Vue Lynx a suitable option for cross-platform development. And as always, Vue Mastery will be here to cover the updates and how to add these new skills to your arsenal.

With that said, we encourage you to support this development by contributing to the project if you can.