Hackernews Vue: View information from Hackernews using Vue.js

Recommend this page to a friend!
  Info   View files Example   Demos   View files View files (142)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 37 All time: 518 This week: 4Up
Version License JavaScript version Categories
hackernews-vue 1.0MIT/X Consortium ...5HTML, Web services
Description Author

This package implements an application view information from Hackernews using Vue.js.

It implements controllers, HTML templates and CSS to view users, news and items from Hackernews.

Picture of Sergey Beskorovayniy
  Performance   Level  
Name: Sergey Beskorovayniy <contact>
Classes: 3 packages by
Country: Ukraine Ukraine
Age: 64
All time rank: 1554 in Ukraine Ukraine
Week rank: 6 Up1 in Ukraine Ukraine Up
Innovation award
Innovation award
Nominee: 1x

Details

Vue-Examples

I used a examples from the <a href="http://vuejs.org/examples/" target="_blank">official website</a> to demonstrate some of the features remarkable library Vue.js.

Main features of the package:

  • can build reactive Web user interfaces.
  • an process HTML templates to generate Web application views that be composed by different parts.
  • assembly of modules is done by technology Asynchronous module definition (AMD). To ensure this technology is used library RequireJS is a JavaScript file and module loader.
  • routing to make building Single Page Applications.
  • realized the localization of two languages: English and Russian.
  • to store data locally in the browser is used the jStorage is a cross-browser key-value store database.
  • to store data on the server is used a database type Firebase.
  • the user interface is built using Bootstrap3 is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Installing

Prerequisites

Deploying

  1. Clone or download vue-examples project with git.
  2. Configure the web server so that the entry point was `index.html`.
  3. Access your project url with web browser (eg. http://localhost/vue-examples/index.html).

Examples

TodoMVC

This example uses Firebase as the data persistence backend. Example is a fully spec-compliant TodoMVC implementation in under minimum effective lines of JavaScript (excluding comments and blank lines).

Markdown Editor

This is simple Markdown editor. Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.

GitHub Commits

This example fetches latest Silex-MVC commits data from GitHub’s API and displays them as a list. You can switch between the master and other branches. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

Firebase + Validation

This example uses Firebase as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.

Sort Grid Component

This is an example of creating a reusable grid component and using it with external data.

Hacker News

This is a HackerNews clone built upon HN’s official Firebase API. In partnership with Firebase, we're making the public Hacker News data available in near real time. Firebase enables easy access from Android, iOS and the web.

Overview Vue.js

Main features of the Vue.js:

  • Reactivity.
  • Components .
  • Modularity.
  • Animations.
  • Routing.
  • Stability.

Vue.js (pronounced /vjuː/, like view) is a library for building interactive web interfaces. The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.

Vue.js itself is not a full-blown framework - it is focused on the view layer only. It is therefore very easy to pick up and to integrate with other libraries or existing projects. On the other hand, when used in combination with proper tooling and supporting libraries, Vue.js is also perfectly capable of powering sophisticated Single-Page Applications.

If you are an experienced frontend developer and want to know how Vue.js compares to other libraries/frameworks, check out the Comparison with Other Frameworks; if you are more interested about how Vue.js approaches larger-scale applications, check out the section on Building Larger-Scale Applications.

Learn more...

Compatibility Note

Vue.js does not support IE8 and below, because Vue.js uses ECMAScript 5 features that are un-shimmable in IE8. However Vue.js supports all ECMAScript 5 compliant browsers.

Release Notes

Detailed release notes for each version are available on GitHub.

CDN

Available on jsdelivr or cdnjs (takes some time to sync so the latest version might not be available yet).

Also available on unpkg, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at unpkg.com/vue/.

  vue-examplesExternal page  
  Files folder image Files  
File Role Description
Files folder imageapp (6 directories)
Accessible without login Plain text file index.html Data Auxiliary data
Accessible without login Plain text file LICENSE.md Lic. License text
Accessible without login Plain text file main.js Example Example script
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  app  
File Role Description
Files folder imagecomponents (10 directories)
Files folder imagecss (7 files, 2 directories)
Files folder imageimg (7 files, 1 directory)
Files folder imagejs (2 files, 1 directory)
Files folder imageschemes (1 directory)
Files folder imagetranslations (2 files)

  Files folder image Files  /  app  /  components  
File Role Description
Files folder imageapp (1 file, 1 directory)
Files folder imagefirebase (2 files)
Files folder imagegithub (3 files)
Files folder imagegrid (3 files, 1 directory)
Files folder imagehackernews (6 files, 5 directories)
Files folder imagehome (2 files)
Files folder imagelicense (1 file)
Files folder imagemarkdown (3 files)
Files folder imagereadme (1 file)
Files folder imagetodo (4 files)

  Files folder image Files  /  app  /  components  /  app  
File Role Description
Files folder imagetemplates (6 files)
  Plain text file app.js Class Class source

  Files folder image Files  /  app  /  components  /  app  /  templates  
File Role Description
  Accessible without login HTML file common.html Doc. Documentation
  Accessible without login HTML file footer.menu.html Doc. Documentation
  Accessible without login HTML file footer.privacy.html Doc. Documentation
  Accessible without login HTML file header.html Doc. Documentation
  Accessible without login HTML file msgbox.html Doc. Documentation
  Accessible without login HTML file navbar.html Doc. Documentation

  Files folder image Files  /  app  /  components  /  firebase  
File Role Description
  Accessible without login HTML file firebase.html Doc. Documentation
  Plain text file firebase.js Class Class source

  Files folder image Files  /  app  /  components  /  github  
File Role Description
  Accessible without login Plain text file github.css Data Auxiliary data
  Accessible without login HTML file github.html Doc. Documentation
  Plain text file github.js Class Class source

  Files folder image Files  /  app  /  components  /  grid  
File Role Description
Files folder imagetable (2 files)
  Accessible without login Plain text file grid.css Data Auxiliary data
  Accessible without login HTML file grid.html Doc. Documentation
  Accessible without login Plain text file grid.js Aux. Auxiliary script

  Files folder image Files  /  app  /  components  /  grid  /  table  
File Role Description
  Accessible without login HTML file table.html Doc. Documentation
  Plain text file table.js Class Class source

  Files folder image Files  /  app  /  components  /  hackernews  
File Role Description
Files folder imagecomment (4 files)
Files folder imageitem (4 files)
Files folder imageitemview (4 files)
Files folder imagenewsview (4 files)
Files folder imageuserview (4 files)
  Accessible without login Plain text file filters.js Aux. Auxiliary script
  Accessible without login Plain text file hackernews.css Data Auxiliary data
  Accessible without login HTML file hackernews.html Doc. Documentation
  Accessible without login Plain text file hackernews.js Aux. Auxiliary script
  Accessible without login Plain text file README.md Example Example script
  Accessible without login Plain text file store.js Example Example script

  Files folder image Files  /  app  /  components  /  hackernews  /  comment  
File Role Description
  Accessible without login Plain text file comment.css Data Auxiliary data
  Accessible without login HTML file comment.html Doc. Documentation
  Plain text file comment.js Class Class source
  Plain text file Comment.vue Class Class source

  Files folder image Files  /  app  /  components  /  hackernews  /  item  
File Role Description
  Accessible without login Plain text file item.css Data Auxiliary data
  Accessible without login HTML file item.html Doc. Documentation
  Plain text file item.js Class Class source
  Plain text file Item.vue Class Class source

  Files folder image Files  /  app  /  components  /  hackernews  /  itemview  
File Role Description
  Accessible without login Plain text file itemview.css Data Auxiliary data
  Accessible without login HTML file itemview.html Doc. Documentation
  Plain text file itemview.js Class Class source
  Plain text file ItemView.vue Class Class source

  Files folder image Files  /  app  /  components  /  hackernews  /  newsview  
File Role Description
  Accessible without login Plain text file newsview.css Data Auxiliary data
  Accessible without login HTML file newsview.html Doc. Documentation
  Plain text file newsview.js Class Class source
  Plain text file NewsView.vue Class Class source

  Files folder image Files  /  app  /  components  /  hackernews  /  userview  
File Role Description
  Accessible without login Plain text file userview.css Data Auxiliary data
  Accessible without login HTML file userview.html Doc. Documentation
  Accessible without login Plain text file userview.js Aux. Auxiliary script
  Accessible without login Plain text file UserView.vue Data Auxiliary data

  Files folder image Files  /  app  /  components  /  home  
File Role Description
  Accessible without login HTML file home.html Doc. Documentation
  Accessible without login Plain text file home.js Aux. Auxiliary script

  Files folder image Files  /  app  /  components  /  license  
File Role Description
  Accessible without login Plain text file license.js Aux. Auxiliary script

  Files folder image Files  /  app  /  components  /  markdown  
File Role Description
  Accessible without login Plain text file markdown.css Data Auxiliary data
  Accessible without login HTML file markdown.html Doc. Documentation
  Plain text file markdown.js Class Class source

  Files folder image Files  /  app  /  components  /  readme  
File Role Description
  Accessible without login Plain text file readme.js Aux. Auxiliary script

  Files folder image Files  /  app  /  components  /  todo  
File Role Description
  Accessible without login Plain text file store.js Aux. Auxiliary script
  Accessible without login Plain text file todo.css Data Auxiliary data
  Accessible without login HTML file todo.html Doc. Documentation
  Plain text file todo.js Class Class source

  Files folder image Files  /  app  /  css  
File Role Description
Files folder imagepie (3 files)
Files folder imagesymfony (3 files)
  Accessible without login Plain text file bootstrap-theme.css Data Auxiliary data
  Accessible without login Plain text file bootstrap-theme.css.map Example Example script
  Accessible without login Plain text file bootstrap-theme.min.css Data Auxiliary data
  Accessible without login Plain text file bootstrap.css Data Auxiliary data
  Accessible without login Plain text file bootstrap.css.map Example Example script
  Accessible without login Plain text file bootstrap.min.css Data Auxiliary data
  Accessible without login Plain text file mystyle.css Data Auxiliary data

  Files folder image Files  /  app  /  css  /  pie  
File Role Description
  Plain text file PIE.htc Class Class source
  Plain text file PIE.js Class Class source
  Accessible without login Plain text file PIE.php Data Auxiliary data

  Files folder image Files  /  app  /  css  /  symfony  
File Role Description
  Accessible without login Plain text file body.css Data Auxiliary data
  Accessible without login Plain text file exception.css Data Auxiliary data
  Accessible without login Plain text file structure.css Data Auxiliary data

  Files folder image Files  /  app  /  img  
File Role Description
Files folder imageassets (4 directories)
  Accessible without login Image file blue_picto_less.gif Icon Icon image
  Accessible without login Image file blue_picto_more.gif Icon Icon image
  Accessible without login Image file glyphicons-halflings-white.png Icon Icon image
  Accessible without login Image file glyphicons-halflings.png Icon Icon image
  Accessible without login Image file grey_magnifier.png Icon Icon image
  Accessible without login Image file logo.png Icon Icon image
  Accessible without login Image file logo400x400.png Icon Icon image

  Files folder image Files  /  app  /  img  /  assets  
File Role Description
Files folder imagebg (8 files)
Files folder imagegradient (6 files)
Files folder imagesystem (8 files)
Files folder imagevue (3 files)

  Files folder image Files  /  app  /  img  /  assets  /  bg  
File Role Description
  Accessible without login Image file bx-admin-mainmenu-items-bg.png Icon Icon image
  Accessible without login Image file header-big.png Icon Icon image
  Accessible without login Image file login-bg.jpg Icon Icon image
  Accessible without login Image file login-bg.png Icon Icon image
  Accessible without login Image file logo-popup-left.png Icon Icon image
  Accessible without login Image file logo-popup-right.png Icon Icon image
  Accessible without login Image file logo-popup-sprite.png Data Auxiliary data
  Accessible without login Image file main-menu-bg.gif Icon Icon image

  Files folder image Files  /  app  /  img  /  assets  /  gradient  
File Role Description
  Accessible without login Image file h150.png Icon Icon image
  Accessible without login Image file h30.png Icon Icon image
  Accessible without login Image file h300.png Icon Icon image
  Accessible without login Image file h500.png Data Auxiliary data
  Accessible without login Image file h600.png Data Auxiliary data
  Accessible without login Image file h80.png Icon Icon image

  Files folder image Files  /  app  /  img  /  assets  /  system  
File Role Description
  Accessible without login Image file alert-error.png Icon Icon image
  Accessible without login Image file alert-info.png Icon Icon image
  Accessible without login Image file alert-success.png Icon Icon image
  Accessible without login Image file alert.png Icon Icon image
  Accessible without login Image file icon-fail.png Icon Icon image
  Accessible without login Image file icon-ok.png Icon Icon image
  Accessible without login Image file icon_warn.gif Icon Icon image
  Accessible without login Image file loading.gif Icon Icon image

  Files folder image Files  /  app  /  img  /  assets  /  vue  
File Role Description
  Accessible without login Image file blue_picto_less.gif Icon Icon image
  Accessible without login Image file blue_picto_more.gif Icon Icon image
  Accessible without login Image file grey_magnifier.png Icon Icon image

  Files folder image Files  /  app  /  js  
File Role Description
Files folder imagelib (11 directories)
  Plain text file lang.js Class Class source
  Plain text file system.js Class Class source

  Files folder image Files  /  app  /  js  /  lib  
File Role Description
Files folder imagees6-promise (3 files)
Files folder imageevents (2 files)
Files folder imageExtendClass (1 file)
Files folder imagefirebase (2 files)
Files folder imagejson (6 files)
Files folder imagejstorage (2 files)
Files folder imagemarked (2 files)
Files folder imagerequirejs (6 files)
Files folder imageunderscore (1 file)
Files folder imagevue-router (2 files)
Files folder imagevue (5 files)

  Files folder image Files  /  app  /  js  /  lib  /  es6-promise  
File Role Description
  Plain text file es6-promise.js Class Class source
  Plain text file es6-promise.min.js Class Class source
  Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  app  /  js  /  lib  /  events  
File Role Description
  Plain text file events.js Class Class source
  Accessible without login Plain text file Readme.md Doc. Documentation

  Files folder image Files  /  app  /  js  /  lib  /  ExtendClass  
File Role Description
  Plain text file Extend.class.js Class Class source

  Files folder image Files  /  app  /  js  /  lib  /  firebase  
File Role Description
  Plain text file firebase.api.js Class Class source
  Plain text file firebase.js Class Class source

  Files folder image Files  /  app  /  js  /  lib  /  json  
File Role Description
  Accessible without login Plain text file cycle.js Example Example script
  Plain text file json.js Class Class source
  Plain text file json2.js Class Class source
  Accessible without login Plain text file json_parse.js Example Example script
  Accessible without login Plain text file json_parse_state.js Example Example script
  Accessible without login Plain text file README Doc. Documentation

  Files folder image Files  /  app  /  js  /  lib  /  jstorage  
File Role Description
  Plain text file jstorage.js Class Class source
  Plain text file jstorage.min.js Class Class source

  Files folder image Files  /  app  /  js  /  lib  /  marked  
File Role Description
  Plain text file marked.js Class Class source
  Plain text file marked.min.js Class Class source

  Files folder image Files  /  app  /  js  /  lib  /  requirejs  
File Role Description
  Plain text file css.js Class Class source
  Plain text file css.min.js Class Class source
  Accessible without login Plain text file domReady.js Example Example script
  Accessible without login Plain text file i18n.js Example Example script
  Plain text file require.js Class Class source
  Accessible without login Plain text file text.js Example Example script

  Files folder image Files  /  app  /  js  /  lib  /  underscore  
File Role Description
  Plain text file underscore.js Class Class source

  Files folder image Files  /  app  /  js  /  lib  /  vue-router  
File Role Description
  Plain text file vue-router.js Class Class source
  Plain text file vue-router.min.js Class Class source

  Files folder image Files  /  app  /  js  /  lib  /  vue  
File Role Description
  Accessible without login Plain text file README.md Doc. Documentation
  Plain text file vue.common.js Class Class source
  Plain text file vue.js Class Class source
  Plain text file vue.min.js Class Class source
  Plain text file vue.min.js.map Class Class source

  Files folder image Files  /  app  /  schemes  
File Role Description
Files folder imageblack-white-gray (2 directories)

  Files folder image Files  /  app  /  schemes  /  black-white-gray  
File Role Description
Files folder imagecss (1 file)
Files folder imageimg (2 files)

  Files folder image Files  /  app  /  schemes  /  black-white-gray  /  css  
File Role Description
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  app  /  schemes  /  black-white-gray  /  img  
File Role Description
  Accessible without login Image file bg-gray.png Icon Icon image
  Accessible without login Image file bullets.gif Icon Icon image

  Files folder image Files  /  app  /  translations  
File Role Description
  Accessible without login Plain text file msg.en.js Example Example script
  Accessible without login Plain text file msg.ru.js Aux. Auxiliary script

 Version Control Unique User Downloads Download Rankings  
 100%
Total:37
This week:0
All time:518
This week:4Up