Vue-instantsearch: Blank screen after updating version from 1.7.0 to 2.0.0?

[Sukhpall-Singh]

Node Version : v10.14.1
NPM Version : 6.4.1:
OS: Windows

Description:
I have integrated algolia in my vuejs project which is working very well. Now i am upgrading this module from version 1.7.0 to 2.0.0. On upgrading package, it shows console errors and nothing is displayed on screen. I also tried to solve it by including required packages but did't get the results. Here are console errors:

[Vue warn]:Unknown custom element: <ais-index> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <ais-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option
[Vue warn]: Error in nextTick: "TypeError: It looks like you forgot to wrap your Algolia search component "<ais-refinement-list>" inside of an "<ais-instant-search>" component."
TypeError: It looks like you forgot to wrap your Algolia search component "<ais-refinement-list>" inside of an "<ais-instant-search>" component.

Here is my code:

<template>
  <div id="app">
    <p>{msg}</p>
    <div id="app">
      <ais-index app-id="latency" api-key="6be0576ff61c053d5f9a3225e2a90f76" index-name="ikea">
        <ais-search-box placeholder="Search for a product..."></ais-search-box>
        <ais-results>
          <template scope="{ result }">
            <div class="search-result">
              <img class="result__image img-responsive" :src="result.image">

              <div class="result__info">
                <h2 class="result__name">
                  <ais-highlight :result="result" attribute-name="name"/>
                </h2>
                <div class="result__type">
                  <ais-highlight :result="result" attribute-name="type"/>
                </div>
                <div class="result__rating">
                  <template v-for="n in 5">
                    <span v-if="n <= result.rating" class="result__star"></span>
                    <span v-else class="result__star--empty"></span>
                  </template>
                </div>
                <div class="result__price">${{result.price}}</div>
              </div>
            </div>
          </template>
        </ais-results>
        <ais-pagination v-bind:class-names="{'ais-pagination': 'pagination'}"></ais-pagination>
      </ais-index>
    </div>
  </div>
</template>
<script>

//main.js 
import 'babel-polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import InstantSearch from 'vue-instantsearch'

//router 
import router from './router'
Vue.use(InstantSearch)

Vue.config.productionTip = false

new Vue({
    store,
    router,
    i18n,
    render: h => h(App)
}).$mount('#app')

What changes are required to make it work?

[Haroenv]

A migration guide is available here, since it's a major change: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/vue/

[ugurarici]

Maybe you should update docs links on readme file. I'm a newcomer and just followed the link on readme to reach docs and reached old versions document: https://community.algolia.com/vue-instantsearch/

When I made a search on issues I found this issue and saw correct link as https://www.algolia.com/doc/guides/building-search-ui/getting-started/vue/

[Haroenv]

Good call, I forgot the image on the readme linked there. I just updated it @ugurarici

[ugurarici]

Thanks for fast response. I saw you updated master branch but 2.0.0 tag still points to old versions' documentation.

And text is still There's a dedicated documentation available at community.algolia.com/vue-instantsearch. Of course most of people will click on the link and will redirect to new version but maybe you can update the text to new version too.

[ugurarici]

Oops, also "getting started" guide is still pointing to old version documentation's "Getting started" page.
this-> https://community.algolia.com/vue-instantsearch/getting-started/getting-started.html
Should be updated to this->
https://www.algolia.com/doc/guides/building-search-ui/getting-started/vue/

[Haroenv]

I must have been blind, sorry. Will update those too. Thanks a lot @ugurarici

[ugurarici]

Would you like me to open a pull request for master branch's README.md file?

I tried to check contributing page (from README) but it also couldn't found. 😕 https://github.com/algolia/vue-instantsearch/blob/master/CONTRIBUTING.md

[Haroenv]

Yes, PR would definitely be welcome!

[ugurarici]

Done!

[Haroenv]

This should have been all the references. Thanks!