Hi, I’m Sarah x x

InstantSearch AutoComplete GeoSearch Full search interface Autocomplete menu Search through locations

InstantSearch AutoComplete GeoSearch Full search interface Autocomplete menu Search through locations Dynamic Scoped components slots Mixins

InstantSearch AutoComplete GeoSearch Full search interface Autocomplete menu Search through locations

Hierarchical menu Refinement list

Widget Switcher

<widget-switcher :widgets=”[ { title: ‘refinementList’, body: RefinementList }, { title: ‘menu’, body: Menu }, { title: ‘hierarchicalMenu’, body: HierarchicalMenu } ]” />

Registered component import RefinementList from ‘@/components/widgets/RefinementList’ export default { components: { RefinementList } } <refinement-list>

Component exposed as a JavaScript object import RefinementList from ‘@/components/widgets/RefinementList’ export default { data() { return { RefinementList } } } RefinementList

Dynamic components ⚡

Switching strategy <template> <div> <component :key=”index” :class=”{ ‘hidden’: currentWidgetIndex !== index }” v-for=”(widget, index) in widgets” :is=”widget.body” /> </div> </template>

<ais-refinement-list> <ais-menu> Conjunctive Disjunctive

Alternative switching strategy <component :is=”widgets[currentWidgetIndex].body” />

AutoComplete

Slots Parent component <template> <div> <child-component> <p>Data for the child.</p> </child-component> </div> </template> Child component <template> <div> <p> <slot><!— Goes here! —></slot> </p> </div> </template>

Scoped slots = slots + Parent component <template> <div> <child-component :todos=”todos”> <template slot-scope=”{ todo }”> <span v-if=”todo.done”> ✅ </span> {{ todo.text }} </template> </child-component> </div> </template> Child component <template> <ul> <li :key=”todo.id” v-for=”todo in todos” > <slot :todo=”todo”> {{ todo.text }} </slot> </li> </ul> </template>

<ais-autocomplete> Vue InstantSearch autocomplete widget <template slot-scope=”{ indices, refine }”> Data from the widget <vue-autosuggest :suggestions=”indicesToSuggestions(indices)” @selected=”onSelect” :input-props=”{ onInputChange: refine }” > <template slot=”header”> Press enter to select, ↑↓ to navigate, esc to dismiss </template> <template slot-scope=”{ suggestion }”> <img :src=”suggestion.item.image”> <h5> <ais-highlight :hit=”suggestion.item” attribute=”name” /> </h5> <p>$ {{ suggestion.item.price }}</p> <span v-if=”suggestion.item.free_shipping”> Free Shipping </span> </template> </vue-autosuggest> </template> </ais-autocomplete> Custom template using data from the widget

GeoSearch

Connectors

Connector + Vue InstantSearch = mixin import { connectGeoSearch } from ‘instantsearch.js/es/connectors’ import { createWidgetMixin } from ‘vue-instantsearch’ export default { mixins: [ createWidgetMixin({ connector: connectGeoSearch }) ] }

<template <google-map> <google-map-marker :key=”index” v-for=”(marker, index) in markers” :position=”marker.position” /> <google-map-infowindow :key=”index” v-for=”(marker, index) in markers” :position=”marker.position” /> </google-map> </template> <script> import { connectGeoSearch } from ‘instantsearch.js/es/connectors’ import { createWidgetMixin } from ‘vue-instantsearch’ import { Map, Marker, InfoWindow } from ‘vue2-google-maps’ export default { mixins: [createWidgetMixin({ connector: connectGeoSearch })], computed: { markers() { return Boolean(this.state) ? [] : this.state.items.map(({ /* … / }) => ({ / … / })) } }, / … */ } </script>

= algolia.com/doc/guides/building-search-ui/widgets/showcase/vue/

Thank you! @frontstuff_io