search stuffs

resources/js/app.js

@@ -1,5 +1,15 @@
 require('./bootstrap');
 
+import { MeiliSearch } from 'meilisearch';
+
+window.MeiliSearch = MeiliSearch;
+
+import search from './search';
+
+window.components = {
+    search,
+};
+
 import Vue from 'vue';
 import Turbolinks from 'turbolinks';
 import TurbolinksAdapter from 'vue-turbolinks';

resources/js/search.js

@@ -0,0 +1,36 @@
+export default function (meilisearchConfig, index, searchOptions) {
+    const defaultSearchOptiobns = {
+        limit: 10,
+    };
+
+    searchOptions = { ...defaultSearchOptiobns, ...searchOptions };
+
+    return {
+        query: "",
+        index: null,
+        results: null,
+
+        watchQuery() {
+            this.$watch("query", (query) => {
+                if (query == "") {
+                    this.results = null;
+                    return;
+                }
+
+                this.search(query);
+            });
+        },
+
+        async search(query) {
+            this.results = await this.index.search(query, searchOptions);
+        },
+
+        init() {
+            const client = new window.MeiliSearch(meilisearchConfig);
+
+            this.index = client.index(index);
+
+            this.watchQuery();
+        },
+    };
+}