vue-hackernews-2.0

HackerNews clone built with Vue 2.0 + vue-router + vuex, with server-side rendering.

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.

Server Side Rendering
- Vue + vue-router + vuex working together
- Server-side data pre-fetching
- Client-side state & DOM hydration
- Automatically inlines CSS used by rendered components only
- Preload / prefetch resource hints
- Route-level code splitting
Progressive Web App
- App manifest
- Service worker
- 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 is a demo primarily aimed at explaining how to build a server-side rendered Vue app, as a companion to our SSR documentation. There are a few things we probably won't do in production if we were optimizing for performance, for example:

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.
In practice, it is unnecessary to code-split for an app of this size (where each async chunk is only a few kilobytes so the extra request isn't really worth it), nor is it optimal to extract an extra CSS file (which is only 1kb).

It is therefore not recommended to use this app as a reference for Vue SSR performance - instead, do your own benchmarking, and make sure to measure and optimize based on your actual app constraints.

Architecture Overview

A detailed Vue SSR guide can be found here.

Build Setup

Requires Node.js 7+

# install dependencies
npm install # or yarn

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

# build for production
npm run build

# serve in production mode
npm start

License

MIT

Project Name	Stars	Repos Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Vue Hackernews 2.0	10,966		4 months ago			146	mit	JavaScript
HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
Mmf Blog Vue2 Ssr	174		2 years ago			5	mit	Vue
mmf-blog-vue2 ssr(The service side rendering)
Vue Webpack Ssr Fully Featured	111		5 years ago			9		JavaScript
A fully featured Vue.js boilerplate project that uses Vuex, vue-router, vue-i18n, Server Side Rendering and much, much more.
Vue Zhihudaily 2.0	108		6 years ago			3	mit	CSS
Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering
Vuejs Calendar	94		3 years ago			4		JavaScript
Source code for Build A Professional Vue App with Vuex & Server-Side Rendering
Vue Easy Renderer	80	3	5 years ago	39	November 08, 2017	1		JavaScript
Vue.js server-side renderer for *.vue file with Node.js.
Bitmappery	75		20 hours ago			4	mit	TypeScript
Browser based non-destructive photo editor with layering, masking, customizable brushes and cloud storage integration for all your web based working.
Vue Example	64		6 years ago			2		JavaScript
Vue.js example application (server-side rendering, router, vuex store, form validation, i18n & l10n)
Mmf Blog Vue2 Pwa Ssr	64		14 days ago			4	mit	Vue
mmf-blog-vue2 ssr(The service side rendering)
Vue Ssr Boilerplate	63		6 years ago			3		JavaScript
Vue + vue-router + vuex boilerplate with server-side rendering