<h2>vue-hackernews-2.0</h2>

<p>is a demo project built with the following technologies:</p>

<ul>

<li>Vue 2.0</li>

<li>vue-router 2.0</li>

<li>vuex 2.0</li>

<li>Webpack 2.0</li>

</ul>

<p>Check out <a href="https://github.com/vuejs/vue/wiki/Vue-2.0-Beta---Starter-Resources" target="_blank">this guide</a> for getting started on Vue 2.0.</p>

<p>This project showcases these features:</p>

<ul>

<li>

Single file Vue components with:

<ul>

<li>Hot-reload during development</li>

<li>Stylus for CSS pre-processing</li>

<li>CSS extraction for production</li>

</ul>

</li>

<li>

Server-Side Rendering with:

<ul>

<li>Universal application code</li>

<li>Server-side data pre-fetching</li>

<li>Client-side DOM re-hydration</li>

</ul>

</li>

<li>Powerful yet easy-to-use animation system</li>

</ul>

<p><a href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank">Source code on GitHub.</a></p>

<div class="item-view">

<template v-if="item">

<div class="item-view-header">

<a :href="item.url" target="_blank">

<h2>{{ item.title }}</h2>

</a>

<span v-if="item.url">({{ item.url | host }})</span>

<p>

{{ item.score }} points

| by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>

{{ item.time | timeAgo }} ago

| {{ item.descendants }} comments

</p>

</div>

<ul class="item-view-comments">

<comment v-for="id in item.kids" :id="id"></comment>

</ul>

</template>

<div class="user-view">

<template v-if="user">

<ul>

<li><span class="label">user:</span> {{ user.id }}</li>

<li><span class="label">created:</span> {{ user.created | timeAgo }} ago</li>

<li><span class="label">karma:</span> {{user.karma}}</li>

<li>

<span class="label">about:</span>

<div class="about" v-html="user.about"></div>

</li>

</ul>

<p class="links">

<a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a><br>

<a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>

</p>

</template>