Vue instantsearch

Another question ! Everything is fine on https://jean-pierre-kaiser.ch/v1/oeuvres/ except with IE10 & 11
the code is based on algolia vue.js instantsearch documentation and almost identical to this this codepen https://codepen.io/rayrutjes/pen/dWBMje as I want the infinite scroll.
Is there a fix for IE ?
Thank you

Hi @fabrice,

If you are using https://www.npmjs.com/package/vue-observe-visibility you need to use a polyfill to make it work everywhere.

Instructions are on the readme of the library.

Let me know if that works for you.

Thank you - I am using the requested polyfill (I included it in my header) and this made it work in safari… But the IE10-11 thing looks like something else…
It is a vue warn that says “Failed to generate render function:
SyntaxError: Expected identifier in
…”
And by the way, by giving a height and width (thanks to stackoverflow) to the div observed for the load more, it works now in Edge (thanks to stackoverflow).
But we need IE11 - still about 8-9% percent of browsers here in Switzerland.
Another thing: I’ve just checked in IE11 your codepen https://codepen.io/rayrutjes/pen/dWBMje
and I get the same error…

Maybe you should try using another library than the one we used to check the visibility of an element.
@vvo has built one: https://github.com/vvo/in-viewport
so if you are able to create a Vue.js directive on top of that it should work better.

Maybe @haroen has another idea?

Thanks! Mine is definitely compatible with old browsers but not actively maintained (=if it works fine, if it has bugs you will have to fix them)

https://github.com/ApoorvSaxena/lozad.js is very recent and works well too. But you need a polyfill. Try it and let us know.

I can try… but are you sure it is the load-more that makes a problem for IE11 ?
I just tried your pen without the div for the load more and nothing is displayed…
This pen (https://codepen.io/rayrutjes/pen/LyKpzq - simple pagination) is not working in IE11 either.

Hey Fabrice,

You’re right, I think there might be usage of Promise and Map that should be polyfilled. I am trying around what exactly needs to be done and we’ll make sure it’s in a guide.

1 Like

So I found the 2 things that needed to change for IE11 compatibility:

  1. destructuring in results isn’t supported (that should be okay if you’re building with babel etc, but not if you’re doing it like here in the browser)
  2. Object.assign polyfill

Here’s a version of the bootstrap example with those two things solved: https://codepen.io/Haroenv/pen/xXQVRG/

1 Like

That was quick ! Thank you ! So there is a solution…
I’m not very familiar with babel (not using it in the current version) but I tried to paste your code on top of “new vue…” in my app.js file and used codekit to transpile it into map-min.js wich I loaded instead of app.js in the footer… but it didn’t work !
Does this mean that the js in your new codepen is generated from some other code and transpiled ?

Nope, I didn’t use any transpilation. Can you share your project so we can help debugging it? The Map polyfill shouldn’t be necessary, because that was codepen’s own code breaking, not ours (you can check it out in /debug/).

Something that I changed was the <ais-results> call, I’m not sure if you saw that difference

Oh I had’nt seen that you had changed a few things in the html…
ok, here is a pen https://codepen.io/cfabrice/pen/MEzGKE
it is most of this page http://jean-pierre-kaiser.ch/v1/oeuvres
I just commented the app.js include in the footer and pasted the code in the js pen part.

1 Like

Hey Fabrice,

<ais-results :stack="true" class="grid-x grid-margin-x">
   <template scope="hit">
      <div class="oeuvre-item medium-4 large-2 xlarge-1 cell">
         <div class="oeuvre-item__image">
            <a v-bind:href="hit.result.images.large.url" class="lightbox">
               <img class="img-responsive" :src="hit.result.images.medium.url">
               <h5 class="oeuvre-item__title">
                  <span class="oeuvre-item__title-titre">{{hit.result.post_title}}</span>, <span class="oeuvre-item__title-year">{{hit.result.annee}}</span>, <span class="oeuvre-item__title-tech">{{hit.result.technique}}</span>, <span class="oeuvre-item__title-dim">{{hit.result.dimension}}</span>
               </h5>
               <p class="oeuvre-item__cat">{{hit.result.taxonomies.category}}</p>
            </a>
         </div>
      </div>
   </template>
</ais-results>

<ais-stats>

  <template scope="stats" v-if="totalResults > 1">
      <p> {{stats.totalResults}} oeuvres</p>
    </template>

</ais-stats>

This is a change I made to your codepen to make it work in IE11, because it doesn’t support destructuring.

Codepen had some other issues, but it works as a standalone file: https://mathematician-shirley-75747.netlify.com

codepen: https://codepen.io/Haroenv/pen/EwGjNB

That looks perfect ! Thank you very very much.

1 Like

@haroen could you use a service like Polyfill.io to fill in whats missing in IE11. Object.assign is available, what would i need for destructuring? thanks!

Destructuring is a language feature, you can’t do that in the browser. You need to use babel and Vue SFC’s, @rikeshgovan. See https://vuejs.org/v2/guide/single-file-components.html