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.

      hackernews-csssrc/App.vue

      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