Vue-instantsearch: v2 - export 'SearchInput' was not found in 'vue-instantsearch'

[tfossoul]

Feedback on the v2 alpha version 🆕

Describe the bug / features

I'd like to apply the vuetify design on my algolia widget.
So I have to extend the searchInput to adapt the html template.

I tried to add this line "import { SearchInput } from 'vue-instantsearch'" but i got this following error:
"export 'SearchInput' was not found in 'vue-instantsearch'"

Btw I don't see the "SearchInput" on the library file "instantsearch.js" as export or export default.
Is it normal ? What's the best pratice to extend a instant search component in v2Alpha ?
Am i missing something obvious ?

Thanks in advance

[samouss]

You should be able to use the slots to customise the SearchBox. We have some examples in Storybook. Here is the source code of the example:

https://github.com/algolia/vue-instantsearch/blob/827d8a4a758fc0718acfb3c006bb91e27cfdfdd6/stories/SearchBox.stories.js#L15-L26

[tfossoul]

thanks, i check this :)

[Haroenv]

Please feel free to continue answering on this issue. I'll just close it for now since I think this is the correct solution. Please keep us updated on all questions you have @tfossoul!

[tfossoul]

@Haroenv We'll migrate our system in the begining of october and I hope everything will be all right. You are doing a great job btw :)

[Haroenv]

Awesome 👏 keep the comments coming and if you miss something. I’ll make sure to also make an example with all the vuetify components (range is already done in the stories).

[bmrankin]

@tfossoul I have been struggling with this as well.
This may not solve your specific issue but setting it up like the following worked for me.

<!-- In template-->
<v-text-field
     name="name"
     label="Search"
     v-model="simple_search_query"
></v-text-field>

<ais-index
      app-id="..."
      api-key="..."
      index-name="..."
      :query="simple_search_query" // Pass the query in
></ais-index>

// in script
export default {
    data:() => ({
        simple_search_query: ''
    }), ...
  }

@Haroenv thanks for the work and the upcoming examples

[Haroenv]

@bmrankin, while that's possible, the correct & supported way is the one @samouss linked (for v2, for the current v1 version your code is indeed a possibility)