Vue custom widgets - any examples?

[ColeDCrawford]

I am using SearchKit, which wraps Instantsearch and provides an Elasticsearch connection. I have some nested data that looks like this:

          "date": {
            "name": "c. 1690",
            "start_date": "1685-01-01",
            "end_date": "1695-12-31"
          },

I am trying to create a custom widget with Instantsearch + Vue which will allow me to filter my date data. It should take two inputs (integers representing years), and two filter attributes (date.start_date and date.end_date), and return documents with date.start_date greater than the start input and date.end_date less than the end input. These inputs can start as text inputs (no need for a date widget, the granularity of my data is year) but I will eventually want to replace them with a custom slider widget.

I haven't been able to find any good examples of custom Instantsearch widgets created with Vue. The Algolia docs are pretty light on this front: https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/vue/?client=Vue+3#custom-connectors. I was able to find an example using React:

• Code: https://github.com/searchkit/searchkit/blob/main/apps/web/pages/camping-sites-demo.jsx
• Live: https://www.searchkit.co/camping-sites-demo
  But I am struggling to bring this over to Vue given the limited Vue docs and the different patterns. I can't find a CreateConnector pattern for Vue like there is in the instantsearch-react-dom library. Any examples of custom Vue Instantsearch widgets and connectors would be great.

[ColeDCrawford]

Another (broken) React example: https://codesandbox.io/p/sandbox/kwklo3rz63?file=%2Fsrc%2FApp.js but haven't had any luck with Vue

[Haroenv]

createConnector is the previous api for React InstantSearch (v6), and isn't the right way to go for react anymore either. An example custom widget (not vue but the connector part is the same) would be this: https://github.com/haroenv/instantsearch-negative-refinement-list or https://github.com/algolia/instantsearch-widget-date-range-picker