search init

gridsome.config.js

@@ -8,7 +8,33 @@ module.exports = {
     siteName: 'ACI',
     siteDescription: 'ThreeFold Partners',
     siteUrl: 'http://localhost:8080',
-    plugins: [{
+    plugins: [
+      {
+        use: 'gridsome-plugin-flexsearch',
+        options: {
+          searchFields: ['name', 'title','excerpt', 'author', 'content'],
+          collections: [
+            {
+              typeName: 'Blog',
+              indexName: 'Blog',
+              fields: ['name', 'title', 'rank', 'excerpt', 'image', 'path', 'datetime', 'author', 'pageInfo']
+            },
+  
+            {
+              typeName: 'Project',
+              indexName: 'Project',
+              fields: ['title', 'rank', 'excerpt', 'image', 'path', 'datetime', 'author', 'pageInfo']
+            },
+            
+            {
+              typeName: 'Person',
+              indexName: 'Person',
+              fields: ['name', 'rank', 'excerpt', 'image', 'path', 'bio', 'pageInfo']
+            },
+          ]
+        }
+      },
+      {
             use: 'gridsome-plugin-tailwindcss',
             options: {
                 tailwindConfig: './tailwind.config.js',

package.json

@@ -8,12 +8,14 @@
   },
   "dependencies": {
     "@gridsome/source-filesystem": "^0.6.2",
+    "@gridsome/source-graphql": "^0.1.0",
     "@gridsome/transformer-remark": "^0.6.2",
     "@noxify/gridsome-remark-classes": "^1.0.0",
     "@noxify/gridsome-remark-table-align": "^1.0.0",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "gridsome": "^0.7.20",
+    "gridsome": "^0.7.3",
+    "gridsome-plugin-flexsearch": "^1.0.5",
     "gridsome-plugin-tailwindcss": "^3.0.1",
     "gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
     "lodash": "^4.17.20",

src/pages/Search.vue

@@ -0,0 +1,45 @@
+<template>
+  <Layout>
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
+      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
+        <PostListItem v-for="edge in searchResults" :key="edge.node.id" :record="edge.node" />
+      </div>
+    </div>
+     <!-- <div class="pagination flex justify-center mb-8">
+        <Pagination
+          :baseUrl="baseurl"
+          :currentPage="searchResults.pageInfo.currentPage"
+          :totalPages="searchResults.pageInfo.totalPages"
+          :maxVisibleButtons="5"
+          v-if="searchResults.pageInfo.totalPages > 1"
+        />
+      </div> -->
+      {{searchResults}}
+  </Layout>
+</template>
+
+<script>
+import PostListItem from '~/components/PostListItem.vue';
+import Pagination from "~/components/Pagination.vue";
+
+export default {
+  metaInfo: {
+    title: "Search"
+  },
+  data: () => ({
+    q: 'the'
+  }),
+  computed: {
+    searchResults () {
+      const searchTerm = this.q
+      if (searchTerm.length < 3) return []
+      return this.$search.search({ query: searchTerm, limit: 5 })
+    }
+  },
+  components: {
+    PostListItem,
+    Pagination
+  },
+
+}
+</script>