add documentation on how to use insights middleware in Nuxt

Bug 🐞

What is the current behavior?

Currenly i’m using ais-instantsearch-ssr and i want to add algolia analytics to this. But right now i get some errors regarding the server side rendering and etc.

What is the expected behavior?

Track searchs, clicks, and conversions with insights.

RIght now i get a window is not defined when i add insights to data like this:

data() {
        // Created in `data` to access the Vue Router
        const mixin = createServerRootMixin({
            searchClient: getSearchClient(),
            indexName: process.env.indice,
            clickAnalytics: true,
            replicas: [
                `SortByDESC ${process.env.commerceCulture}`,
                `SortByASC ${process.env.commerceCulture}`,
                `SortByLaunch ${process.env.commerceCulture}`,
                `SortByDiscountDESC ${process.env.commerceCulture}`
            ],
            routing: {
                router: nuxtRouter(this.$router),
                stateMapping:  singleIndex(process.env.indice),
            },
        });
        return {
            ...mixin.data(),
            insightsClient: window.aa,
        };
    },

is there a fix to this? if i add it in beforeMount i get this error on clicks:

Do you have a working example with insights enabled in nuxt?

[Haroenv]

it would be this.insightsClient, but yes

[francoischalifour]

Hey! I guess Nuxt doesn’t have access to the window object when rendering on the server. Can you try to install search-insights in your project, and to import Search Insights in your file?

import insightsClient from 'search-insights';

// ...

export default {
  data() {
    // ...
    return {
      ...mixin.data(),
      insightsClient,
    };
  },
};