https & non fixed items

components/ItemList.vue

 <template>
   <div class="news-view view">
-    <div class="news-list-nav">
-      <router-link v-if="page > 1" :to="'/' + type + '/' + (page - 1)">&lt; prev</router-link>
-      <a v-else class="disabled">&lt; prev</a>
-      <span>{{ page }}/{{ maxPage }}</span>
-      <router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more &gt;</router-link>
-      <a v-else class="disabled">more &gt;</a>
-    </div>
-    <transition :name="transition">
+    <item-list-nav :type="type" :page="page" :maxPage="maxPage"></item-list-nav>
+    <transition :name="transition" mode="out-in">
       <div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
         <transition-group tag="ul" name="item">
           <item v-for="item in displayedItems" :key="item.id" :item="item">
@@ -15,17 +9,20 @@
         </transition-group>
       </div>
     </transition>
+    <item-list-nav :type="type" :page="page" :maxPage="maxPage"></item-list-nav>
   </div>
 </template>
 
 <script>
 import { watchList } from '../api'
 import Item from './Item.vue'
+import ItemListNav from './ItemListNav.vue'
 
 export default {
   name: 'item-list',
   components: {
-    Item
+    Item,
+    ItemListNav
   },
   props: {
     type: String
@@ -44,9 +41,6 @@ export default {
     maxPage() {
       const {itemsPerPage, lists} = this.$store.state
       return Math.ceil(lists[this.type].length / itemsPerPage)
-    },
-    hasMore() {
-      return this.page < this.maxPage
     }
   },
 
@@ -97,32 +91,14 @@ export default {
 </script>
 
 <style lang="stylus">
-.news-view
-  padding-top 45px
-
-.news-list-nav, .news-list
+.news-list
   background-color #fff
   border-radius 2px
 
-.news-list-nav
-  padding 15px 30px
-  position fixed
-  text-align center
-  top 55px
-  left 0
-  right 0
-  z-index 998
-  box-shadow 0 1px 2px rgba(0, 0, 0, .1)
-  a
-    margin 0 1em
-  .disabled
-    color #595959
-
 .news-list
-  position absolute
-  margin 30px 0
+  margin 10px 0
   width 100%
-  transition all .5s cubic-bezier(.55, 0, .1, 1)
+  transition all .3s cubic-bezier(.55, 0, .1, 1)
   ul
     list-style-type none
     padding 0

components/ItemListNav.vue

+<template>
+  <div class="news-list-nav">
+    <router-link v-if="page > 1" :to="`/${type}/${page - 1}`">&lt; prev</router-link>
+    <a v-else class="disabled">&lt; prev</a>
+    <span>{{ page }}/{{ maxPage }}</span>
+    <router-link v-if="hasMore" :to="`/${type}/${page + 1}`">more &gt;</router-link>
+    <a v-else class="disabled">more &gt;</a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: String,
+    page: Number,
+    maxPage: Number
+  },
+  computed: {
+    hasMore() {
+      return this.page < this.maxPage
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.news-list-nav, .news-list
+  background-color #fff
+  border-radius 2px
+
+.news-list-nav
+  padding 15px 30px
+  text-align center
+  box-shadow 0 1px 2px rgba(0, 0, 0, .1)
+  a
+    margin 0 1em
+  .disabled
+    opacity 0.8
+</style>

layouts/default.vue

@@ -24,7 +24,8 @@ export default {
   head() {
     return {
       link: [
-        { rel: 'canonical', href: `https://hn.nuxtjs.org${this.$route.fullPath}` }
+        // We use $route.path since we don't use query parameters
+        { rel: 'canonical', href: `https://hn.nuxtjs.org${this.$route.path}` }
       ]
     }
   }
@@ -37,7 +38,7 @@ export default {
     font-size 15px
     background-color lighten(#eceef1, 30%)
     margin 0
-    padding-top 55px
+    padding 0
     color #34495e
     overflow-y scroll
 
@@ -45,17 +46,10 @@ export default {
     color #34495e
     text-decoration none
 
-  .progress
-    z-index: 1000 !important
-
   .header
     background-color #188269
-    position fixed
     z-index 999
     height 55px
-    top 0
-    left 0
-    right 0
     .inner
       max-width 800px
       box-sizing border-box

middleware/https.js

 export default ({ isDev, req, redirect }) => {
   // Redirect to https
   if (!isDev && req) {
-    const protocol = req.headers['X-Forwarded-Proto'] || (req.connection.encrypted ? 'https' : 'http')
+    const protocol = req.headers['x-forwarded-proto'] || (req.connection.encrypted ? 'https' : 'http')
     if (protocol === 'http') {
       return redirect(301, `https://${req.headers.host}${req.url}`)
     }