Portal Vue + Vue InstantSearch Widgets
See original GitHub issueHello all
We’re trying to move a bunch of our vue-instantsearch widgets( e.g <ais-clear-refinements />
) to a separate sidebar component. The sidebar component is wrapped by the <ais-instant-search>
widget. The sidebar component contains a slot which is wrapped in a PortalVue tag:
<Portal to="flyout">
<slot />
</Portal>
So the vue-instantsearch widgets are passed into that slot. This results in the following error:
It looks like you forgot to wrap your Algolia search component "<ais-clear-refinements>" inside of an "<ais-instant-search>" component.
We’ve tried passing the Algolia searchClient
into the sidebar component, but the same error occurs. When we remove the <Portal />
tag, it works fine. Any ideas?
Thanks!
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Vue InstantSearch Reference
This widget lets you apply widgets to a specific Algolia index. It's useful when you want to build a federated search interface. ais-search-box....
Read more >How To Implement Search Functionality In Your Nuxt App ...
This tutorial is aimed at Vue.js devs that are familiar with Nuxt. ... Algolia InstantSearch UI component/widget library for Vue.
Read more >How to create tree menu using Vue-Instantsearch?
I was able to do it, following the docs.. https://community.algolia.com/instantsearch.js/v2/widgets/hierarchicalMenu.html. Your data should be structurede this ...
Read more >Vue InstantSearch widgets in the same component using ...
import { createWidgetMixin } from 'vue-instantsearch'; import { connectHierarchicalMenu } from 'instantsearch.js/es/connectors'; export default ...
Read more >Typesense-vue-instantsearch-demo Alternatives and Reviews
Which is the best alternative to typesense-vue-instantsearch-demo? Based on common mentions it is: ✓Itemsjs, ✓Element UI or ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@MrRossBennett i just ran into the same issue.
I managed to work around it for now (still working out the edge cases and some weirdness), by wrapping a portal in a component that provides anything from a shared global bus (so it’s reactive)
this.$bus
is just a Vue instance attached to the prototype.The last piece to this puzzle is a Dummy component that injects the
instantSearchInstance
and sets it on the$bus
.With these two, I have the
Dummy
as a child of theais-instant-search
component, and theProviderComponent
wraps theportal-target
.Another easier approach would be if you’re able to wrap the
portal-target
in the sameais-instant-search
component, so it can successfully provide for the widgets.If you’ve figured out a different solution, please share - I’d like to know if there are better ways to work around it.
PS. Another Idea I’ve had, but haven’t explored fully was to inject the
instantSearchInstance
into a component, and then pass it as a prop to another component that would beportal
-ed, and re-provide theinstantSearchInstance
from it’s props for the widgets that would be child elements.For now I’d recommend either this workaround, or avoiding the need of portals when using Vue InstantSearch. If it’s only a searchbox, you could update the URL or propagate an event down to call
instantSearchInstance.setUiState(state => {state[myIndex].query = query; return state})
with the new query