Skip to content

HN clone built with Vue 3, vue-router & vuex (powered by Vite)

License

Notifications You must be signed in to change notification settings

damianstasik/vue-hackernews-3.0

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-hackernews-3.0

HackerNews clone built with Vue 3.0 + vue-router + vuex.

Features

Note: in practice, it is unnecessary to code-split for an app of this size (where each async chunk is only a few kilobytes), nor is it optimal to extract an extra CSS file (which is only 1kb) -- they are used simply because this is a demo app showcasing all the supported features.

  • Progressive Web App
    • App manifest
    • 100/100 Lighthouse score
  • Single-file Vue Components
    • Hot-reload in development
    • CSS extraction for production
  • Animation
    • Effects when switching route views
    • Real-time list updates with FLIP Animation

A Note on Performance

This demo uses the Firebase-based HN API to showcase real-time updates, but the Firebase API also comes with a larger bundle, more JavaScript to parse on the client, and doesn't offer an efficient way to batch-fetch pages of items, so it impacts performance quite a bit on a cold start or cache miss.

Build Setup

Requires Node.js 12+

# install dependencies
npm i # or yarn

# serve in dev mode, with hot reload at localhost:8080
npm run dev

# build for production
npm run build

License

MIT

About

HN clone built with Vue 3, vue-router & vuex (powered by Vite)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 71.3%
  • JavaScript 26.2%
  • HTML 2.5%