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

I am using the Vue 2 instant search components:

https://v2–vue-instantsearch.netlify.com/getting-started/migration.html

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?

Thanks

Hey @popwaveltd
It’s possible to split your search code over multiples components and files.
We have an example demonstrating it here: https://github.com/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/extending-widgets/src

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”