A presentation at Vue.js Paris in in Paris, France by Sarah Dayan
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
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>
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>
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
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.