Ais-pagination - duplicate "default" slot

Greetings!

I’m having difficulty customizing the ais-pagination Component’s slots.

My search is working great, and if I pass in the <ais-pagination></ais-pagination> Component, it renders and functions perfectly.

I’m trying to pass in named slots to override the markup. The documentation https://community.algolia.com/vue-instantsearch/components/pagination.html) suggests there are five slots: first, previous, default, next, and last.

Whenever I pass in anything to the ais-pagination Component, I’m getting the same error: “Duplicate presence of slot “default” found in the same render tree - this will likely cause render errors.”

Even passing a single element to the default slot (unnamed), I’m getting this error. Like so:
<ais-pagination v-on:page-change="onPageChange"> <p>whatever</p> </ais-pagination>

But I’ve tried lots of other configurations as well, including the named slots:

<ais-pagination>
     <slot name="first">
       <!-- stuff -->
     </slot>
            
     <slot name="previous">
       <!-- stuff -->
     </slot>
            
     <!-- default slot (not named) -->
     <p>whatever</p>

     <slot name="next">
       <!-- stuff -->
    </slot>
            
   <slot name="last">
     <!-- stuff -->
  </slot>
</ais-pagination>

And I’m always getting the same error. Am I daft?

Any help is appreciated!

1 Like

Hey there, it took me a while, but this is how you should do it (explicitly name the default slot and use html tags instead of slot):

  <ais-pagination>
    <span slot="first">first</span>
    <span slot="previous">previous</span>
    <span slot="next">next</span>
    <span slot="last">last</span>
    <span slot="default" slot-scope="{value, active}">{{value}} {{active}}</span>
  </ais-pagination>

This did the trick.

Thank you very much for your help!

1 Like