Vue Lynx
  • English

      • HackerNews

      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).

      hackernews-tailwindsrc/App.vue

      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.

      hackernews-csssrc/App.vue

      Lynx Engine Compatibility

      The regression was bisected across both the frontend bundle and Lynx Engine versions:

      BundleLynx EngineObserved result
      Tailwind 0.2.1 (implicit page root)3.6.0, 3.7.0Data loaded, but the active route remained invisible
      Tailwind 0.2.1 (implicit page root)3.8.1, 3.9.0Feed rendered
      CSS 0.2.1 (explicit page root, before this fix)3.6.0, 3.8.1, source-built 4.1Exact 990100 page ui not found error
      CSS 0.2.6 / pre-fix current bundlesource-built 4.1Same 990100 error
      Minimum inferred engine version

      Use Lynx Engine 3.8.1 or later for these examples. It is the oldest tested engine that rendered the full Tailwind application. Engines 3.6.0 and 3.7.0 have a separate route-visibility limitation even when the data request succeeds.

      The CSS error reproduced unchanged on 3.6.0, 3.8.1, and 4.1, so it was a frontend root-handling regression, not evidence that explicit <page> requires Engine 4.1. The fixed bundle has been directly verified on the source-built 4.1 engine; support for 3.8.1 and 3.9.0 is inferred from this bisect and the fix's reuse of the already-existing native page, pending a direct rerun on those Explorer releases.

      Overview of Changes

      Most code transferred directly — component logic, Vue Router, Composition API, and even <Transition>/<TransitionGroup> work identically. The Vue HackerNews 3.0 reference is a Webpack-based SSR app using Vue 3 + Vuex 4 + axios. Here's what we changed when porting to Lynx:

      AspectVue 3 ReferenceVue Lynx
      Template elements<div>, <span>, <img>, <a><view>, <text>, <image>, tap handlers
      Event handling@click@tap
      Routing historycreateWebHistory()createMemoryHistory()
      ScrollingWindow scroll<scroll-view> component
      State managementVuex 4Pinia
      Data fetchingaxiosTanStack Vue Query
      Build toolWebpack 5 + ExpressRspeedy
      SSRFull SSR with hydrationNone (Lynx doesn't use SSR)

      Notable adaptations:

      • No v-html: Lynx has no HTML parser, so we use a stripHtml() utility to convert HTML comments to plain text
      • <router-link>: Wrapped with Vue Router's custom slot API since Lynx has no <a> tags