How can we define hitsPerPage for createServerRootMixin in vue-instantsearch 3?

We are trying to migrate to vue-instantsearch 3? but we have some issues in server-side rendering with createServerRootMixin. We cannot bypass the default value for hitsPerPage which is 20. We tried with UI initial state etc without success. Can you please provide a clear example and add one in the docs for users who try to upgrade? We 've lost a bunch of hours trying to figure this out so I suppose many will benefit from such examples

Hi carespot,

You can modify search parameters such as hitsPerPage by using the ais-Configure widget.

<ais-configure
  :hits-per-page.camel="#"
/>

If you are not using the default 20 anywhere else, you can also modify the default behavior in the dashboard under Configure -> Pagination -> Hits Per Page.

Hope this fixes the issue!

Thanks @oliver.han We did so but with this approach first 20 items load with server-side rendering of NuxtJS and then the rest come so from UX perspective it is not ideal. We cannot change the default pagination size from the admin panel because we have different pagination sizes here and there so we need to be able to override the default one coming from the admin panel across various pages

On server-side you can change the hitsPerPage value using initialUiState:

    createServerRootMixin({
      searchClient,
      indexName: 'my_wonderful_index',
      initialUiState: {
        my_wonderful_index: {
          configure: {
            hitsPerPage: 50,
          },
        },
      },
    }),

You can find the full example here: https://github.com/algolia/vue-instantsearch/tree/master/examples/nuxt