MeiliSearch — change the limit of 20 documents - vue.js

Question

I'm new to MeiliSearch and trying to set up a simple demo. It is very similar to this official demo. I'm wondering how could I change the default limit of 20 documents in the app?

Answer 1

This can be done with <ais-configure :hitsPerPage="50" />. For example:
<div class="search-panel__results">
<ais-search-box placeholder="Search here…" autofocus/>
<ais-hits :transform-items="transformItems">
<template slot="item" slot-scope="{ item }">
<ais-configure :hitsPerPage="50" />
<div>
<div class="hit-info">🏅 {{ item.year }}</div>
<div class="hit-info">
<ais-highlight :hit="item" attribute="firstname" />
<ais-highlight :hit="item" attribute="surname" />
</div>
<div class="hit-info motivation">
<ais-highlight :hit="item" attribute="motivation" />
</div>
</div>
</template>
</ais-hits>
<ais-pagination />
</div>
To change the default pagination limit off 200 hits, in the App.vue file (from the referenced official demo) update the data section to the following (setting paginationTotalHits to the number you want):
data() {
return {
searchClient: instantMeiliSearch(
MEILISEARCH_HOST,
MEILISEARCH_API_KEY,
{
paginationTotalHits: 300, // default: 200.
}
),
};
},