{"id":24015390,"url":"https://github.com/travis-r6s/gridsome-plugin-flexsearch","last_synced_at":"2025-08-30T02:08:02.726Z","repository":{"id":36303880,"uuid":"223239500","full_name":"travis-r6s/gridsome-plugin-flexsearch","owner":"travis-r6s","description":"Add lightning fast search to Gridsome with FlexSearch","archived":false,"fork":false,"pushed_at":"2023-12-27T12:27:20.000Z","size":228,"stargazers_count":22,"open_issues_count":7,"forks_count":7,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-08-17T17:59:37.271Z","etag":null,"topics":["flexsearch","gridsome","gridsome-plugin","search"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/travis-r6s.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-11-21T18:36:03.000Z","updated_at":"2025-08-12T07:34:58.000Z","dependencies_parsed_at":"2023-12-27T13:38:56.616Z","dependency_job_id":"6adec8d0-b80e-4112-9392-e2a304b27cd1","html_url":"https://github.com/travis-r6s/gridsome-plugin-flexsearch","commit_stats":null,"previous_names":["travis-r6s/gridsome-plugin-flexsearch","thetre97/gridsome-plugin-flexsearch"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/travis-r6s/gridsome-plugin-flexsearch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-plugin-flexsearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-plugin-flexsearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-plugin-flexsearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-plugin-flexsearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/travis-r6s","download_url":"https://codeload.github.com/travis-r6s/gridsome-plugin-flexsearch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travis-r6s%2Fgridsome-plugin-flexsearch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272793018,"owners_count":24993830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flexsearch","gridsome","gridsome-plugin","search"],"created_at":"2025-01-08T07:55:26.031Z","updated_at":"2025-08-30T02:08:02.694Z","avatar_url":"https://github.com/travis-r6s.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gridsome-plugin-flexsearch\n\n\u003e Add lightning fast search to Gridsome with FlexSearch - [demo](https://gridsome-shopify-starter.netlify.app)\n\nTable of contents:\n\n1. [Installation](#installation)\n2. [Configuration](#configuration)\n    - [Additional Options](#additional-options)\n    - [FlexSearch Options](#flexsearch-options)\n3. [Usage](#usage)\n\n## Installation\n\n_Requires a Node version \u003e=12.x, and at least Gridsome `0.7.15`._\n\n```bash\n# Yarn\nyarn add gridsome-plugin-flexsearch\n# NPM\nnpm i gridsome-plugin-flexsearch\n```\n\n`gridsome.config.js`\n```js\nmodule.exports = {\n  // ...\n  plugins: [\n    {\n      use: 'gridsome-plugin-flexsearch',\n      options: {\n        searchFields: ['title'],\n        collections: [\n          {\n            typeName: 'SomeType',\n            indexName: 'SomeType',\n            fields: ['title', 'handle', 'description']\n          }\n        ]\n      }\n    }\n  ]\n}\n```\n\n## Configuration\n\nThis plugin requires a few configurations to get going.\n\nFirstly, you will need to add the fields that will be included in the index and searched. Note that this is different from the below `fields` option, as fields will not be searched - they are just what is returned in each result.\n\n| Option | Explanation |\n| ---------- | --------|\n| `searchFields` | An array of keys in each node, that will be used for the search index. |\n\nYou can also specify optional flexsearch configurations under a `flexsearch` key - the default configuration is to use the `default` profile, which will setup the FlexSearch instance with some sensible defaults.\nHowever you can override this profile, or set custom options such as `tokenize`, `resolution` etc. Read the [FlexSearch](https://github.com/nextapps-de/flexsearch#presets) docs to find out more.\n\nNext, you need to specify what types you want to add to the index with `collections: [...`. `collections` expects an array of objects, each with at least two fields, and one optional field.\n\n| Option | Explanation |\n| ------------- | ------------- |\n| `typeName` | The Schema typename - e.g. `Post`. All nodes with this typename will be added to the search index. |\n| `indexName` | The name of the index created for this collection - can be the same as `typeName`. It is added to the result, so you can differentiate between `Collection` \u0026 `Product` search results for example. |\n| `fields` | An array of keys that will be extracted from each node, and added to the search index doc (what the search result will return when queried). |\n| `transform` | Transforms a schema to enable searching in nested data structures (optional). |\n\nFields will be returned with the search result under a `node` key, so for example you could include a product title, slug, and image to show the product name \u0026 image in the search result, and add a link to the relevant page.\n\nAn example setup is shown below, assuming there is a `Post` and a `Collection` type:\n\n`gridsome.config.js`\n```js\nmodule.exports = {\n  // ...\n  plugins: [\n    {\n      use: 'gridsome-plugin-flexsearch',\n      options: {\n        searchFields: ['title', 'tags', 'authors'],\n        collections: [\n          {\n            typeName: 'Post'\n            indexName: 'Post',\n            fields: ['id', 'title', 'slug', 'image']\n          },\n          {\n            typeName: 'Collection'\n            indexName: 'Collection',\n            fields: ['id', 'title', 'path'],\n            transform: (collection) =\u003e ({\n              ...collection,\n              authors: collection.authors.map(author =\u003e author.name)\n            })\n          }\n        ]\n      }\n    }\n  ]\n}\n```\n\n### GraphQL Source\n\nPrevious versions of this plugin(`\u003c=1.0`) supported using the GraphQL source plugin - however, this has now been deprecated, due to difficulties in querying and fetching the data - it is usually better to import your data into Gridsome's store anyway.\n\n### Additional Options\n\n| Option | Explanation |\n| ---------- | --------|\n| `chunk` | Defaults to false. If `true` or a Number (docs array chunk size), it will split up the FlexSearch index \u0026 docs JSON file to reduce filesizes - useful if you have a huge amount of data. |\n| `compress` | Defaults to false. If you have a large amount of data (5k+ nodes) you can compress this data to substantially decrease the JSON size. Note that this may actually _increase_ the JSON size if you have a small amount of data, due to the way compression works. |\n| `autoFetch` | Defaults to true. This plugin will usually automatically fetch and import the generated FlexSearch index \u0026 docs as soon as the site is loaded, but if you only want this to happen on a certain route (i.e. `/search`) to reduce other page load times for example, you can specify that route with this option, or disable it completely and import yourself with `this.$search.import({ ...`] |\n\nSome examples of these configurations are shown below:\n\n`gridsome.config.js`\n```js\n// ...\noptions: {\n  chunk: true,\n  compress: true,\n  autoFetch: '/search',\n  // Or\n  chunk: 1000,\n  autoFetch: ['/search', '/collections'],\n  // ...\n}\n// ...\n```\n\n### FlexSearch Options\n\nCustom FlexSearch options can be configured under the `flexsearch` key, for example setting default profiles, or adding custom matchers/encoders.\n\n`gridsome.config.js`\n```js\n// ...\noptions: {\n  flexsearch: {\n    cache: true,\n    profile: 'match'\n  }\n  // ...\n}\n// ...\n```\n\n## Usage\n\nNow you can use it in your Gridsome site - the FlexSearch instance is available at `this.$search`:\n\n```vue\n\u003ctemplate\u003e\n  \u003cLayout\u003e\n    \u003cinput\n      id=\"search\"\n      v-model=\"searchTerm\"\n      class=\"input\"\n      type=\"text\"\n      placeholder=\"Search\"\u003e\n    {{ searchResults }}\n  \u003c/Layout\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data: () =\u003e ({\n    searchTerm: ''\n  }),\n  computed: {\n    searchResults () {\n      const searchTerm = this.searchTerm\n      if (searchTerm.length \u003c 3) return []\n      return this.$search.search({ query: searchTerm, limit: 5 })\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nThe search results will be an array of objects, each containing an `id`, the index name as `index`, a `node` object containing the fields you specified in collections, and the `path` to the resource (if using the `gridsome.config.js` `templates` option) which you can use with `g-link`. Image processing is also supported (for local images only), so you can use processed images with `g-image` as ususal.\n\nA handy mixin is also included with this package, to save you writing the above boilerplate:\n\n```vue\n\u003ctemplate\u003e\n  \u003cLayout\u003e\n    \u003cinput\n      id=\"search\"\n      v-model=\"searchTerm\"\n      class=\"input\"\n      type=\"text\"\n      placeholder=\"Search\"\u003e\n    \u003cg-link\n      v-for=\"result in searchResults\"\n      :key=\"result.id\"\n      :to=\"result.path\"\n      class=\"navbar-item\"\u003e\n      \u003cp\u003e{{ result.title }}\u003c/p\u003e\n      \u003cg-image :src=\"result.image\"\u003e\n    \u003c/g-link\u003e\n  \u003c/Layout\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Search from 'gridsome-plugin-flexsearch/SearchMixin'\nexport default {\n  mixins: [Search]\n}\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftravis-r6s%2Fgridsome-plugin-flexsearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftravis-r6s%2Fgridsome-plugin-flexsearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftravis-r6s%2Fgridsome-plugin-flexsearch/lists"}