Vue JS: How to search without using ais-instant-search tag?

I am using the Vue 2 instant search components:


However I’d like to know how I can do this without needing the wrapping ais-instant-search tag?

I have my search interface split up amongst several different components and also in ‘named routes’. This is causing errors about certain facets not being defined.

I have the ais-instant-search tag wrapping all of these child components which I thought would work but it apparently does not when split up in this way.

Is there another way to manually store and inject the search to my components / routes?


Hey @popwaveltd
It’s possible to split your search code over multiples components and files.
We have an example demonstrating it here:

This is one of the example we are working on for the new docs.

Hi Youcef

Thanks for the reply.

That’s odd then, perhaps in my case I’ve found a bug with this new beta version?

I’m using ais components spread accross 2 named routes that are then defined in the router.

e.g. In the router file…

components: {
default: RouteA,
sidebar: RouteB

Route A and B are simply a collection of ais components and other stuff.

The ais wrapper index is defined in the App.vue.

Also to note is that I have a layout system. So instead of App.vue containing a router-view component, it has a dynamic component rendered from the layout defined in the routes meta object.

Could that be tripping it up somehow? E.g.

component :is=“$route.meta.layout”