Virtualscroll added for the history fieldset.

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@nuxtjs/pwa": "^3.0.0-0",
     "nuxt": "^2.0.0",
+    "vue-virtual-scroll-list": "^1.4.2",
     "vuex-persist": "^2.0.1"
   },
   "devDependencies": {

pages/index.vue

@@ -162,7 +162,8 @@
           <button v-bind:class="{ disabled: noHistoryToClear }" v-on:click="clearHistory">Clear History</button>
         </li>
       </ul>
-      <ul v-for="entry in history">
+      <virtual-list class="virtual-list" :size="88" :remain="Math.min(5, history.length)">
+          <ul v-for="entry in history" :key="entry.millis">
             <li>
               <label for="time">Time</label>
               <input name="time" type="text" readonly :value="entry.time">
@@ -190,12 +191,15 @@
               <button name="use" @click="useHistory(entry)">Use</button>
             </li>
         </ul>
+        </virtual-list>
     </pw-section>
 
   </div>
 </template>
 
 <script>
+	  import VirtualList from 'vue-virtual-scroll-list'
+
       const statusCategories = [
         {name: 'informational', statusCodeRegex: new RegExp(/[1][0-9]+/), className: 'info-response'},
         {name: 'successful', statusCodeRegex: new RegExp(/[2][0-9]+/), className: 'success-response'},
@@ -223,7 +227,8 @@
 
       export default {
       components: {
-      'pw-section': section
+      'pw-section': section,
+	      VirtualList
     },
 
       data () {
@@ -327,6 +332,19 @@
               if (this.$refs.response.$el.classList.contains('hidden')) {
                   this.$refs.response.$el.classList.toggle('hidden')
               }
+            let now = new Date();
+            const n = now.toLocaleTimeString()
+              this.history = [{
+                  millis: now.getTime(),
+                  time: n,
+                  method: this.method,
+                  url: this.url,
+                  path: this.path
+              }, ...this.history]
+              window.localStorage.setItem('history', JSON.stringify(this.history))
+              if (this.$refs.response.classList.contains('hidden')) {
+                  this.$refs.response.classList.toggle('hidden')
+              }
               this.$refs.response.$el.scrollIntoView({
                   behavior: 'smooth'
               })