Moved book listing to the vue component.

assets/js/pages/booklisting.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <table class="table">
+      <thead>
+      <tr>
+        <th></th>
+        <th>Title</th>
+        <th>Description</th>
+        <th>Rating</th>
+        <th>Publisher</th>
+        <th>Publish date</th>
+        <th>Actions</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-if="books.length" v-for="book in books">
+        <td>
+          <a :href="'/book/'+book.id">
+            <img class="img-thumbnail" style="max-width: 80px" :src="'/book_covers/cover_'+book.id+'.jpg'"/>
+          </a>
+        </td>
+        <td><a :href="'/book/'+book.id" class="text-decoration-none">{{ book.title }}</a></td>
+        <td>{{ book.short_description }}</td>
+        <td>{{ '⭐'.repeat(book.rating) }}</td>
+        <td>{{ book.publisher }}</td>
+        <td>{{ book.publish_date }}</td>
+        <td>
+          <a :href="'/book/'+book.id" class="text-decoration-none">show</a>
+          <a :href="'/book/'+book.id+'/edit/'" class="text-decoration-none">edit</a>
+        </td>
+      </tr>
+      <tr v-else>
+        <td colspan="9">no records found</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'BookListing',
+  data() {
+    return {
+      searchTerm: null,
+      books: [],
+      selectedBook: null,
+      manualMode: false
+    }
+  },
+  methods: {
+    search: function () {
+      axios.get('/api/books', {
+        params: {title: this.searchTerm},
+        headers: {'accept': 'application/json'}
+      }).then(response => {
+        this.books = response.data;
+      });
+    },
+  },
+  mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.searchTerm = urlParams.get('search') || "";
+    this.search();
+  }
+}
+</script>