rootMixin is not defined

I am getting rootMixin is not defined. I am copying the documentation as it ise. I don’t know what i am doing wrong

<template>
	<div class="">
		<div class="mb-16 bg-white">
			<div class="container py-10 pb-16">
				<h1 class="text-4xl text-gray-700 font-medium leading-tight mb-4">
					Search
				</h1>				
			</div>			
		</div>
		<div class="container">
			<h1 class="text-xl font-medium text-gray-600 mb-6">
				Snippets (x)
			</h1>			
		</div>
		{{ instantSearchState }}
	</div>
</template>

<script type="text/javascript">
import {
  AisInstantSearchSsr,
  AisRefinementList,
  AisHits,
  AisHighlight,
  AisSearchBox,
  AisStats,
  AisPagination,
  createServerRootMixin,
} from 'vue-instantsearch';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  '3LEB06DEL9',
  '7e6ce3fc36d1d1f0639c3cc169e8be2b'
);

export default {
  mixins: [
    createServerRootMixin({
      searchClient,
      indexName: 'snippets',
    }),
  ],
  serverPrefetch() {
    return instantsearch.findResultsState().then(algoliaState => {
      this.$ssrContext.nuxt.algoliaState = algoliaState;
    });
  },
  beforeMount() {
    const results =
      this.$nuxt.context.nuxtState.algoliaState || window.__NUXT__.algoliaState;

    this.instantsearch.hydrate(results);
  },
  mixins: [rootMixin],
  components: {
    AisInstantSearchSsr,
    AisRefinementList,
    AisHits,
    AisHighlight,
    AisSearchBox,
    AisStats,
    AisPagination,
  }}
</script>

Hi there,
I think you may have been using this docs page, is that right? If not could you please let us know where you were looking so we can double check it?

I’ve taken your codesnippet and edited it here: https://codesandbox.io/s/jolly-easley-ttrp6?file=/src/App.vue:392-1012. I hope this helps!

Yes I got the code from there. Why does it not work? Thanks a lot, your code worked perfectly. i however have encountered another problem. I need to pass in a key from backend, but I am failing to do that. I have pasted my code below. Why cannot createServerRootMixin read from data. I am getting error, Cannot read property ‘indexName’ of undefined.

<template>
  <ais-instant-search-ssr>
    <div class="mb-16 bg-white">
      <div class="container py-10 pb-16">
        <div class="flex justify-between items-center mb-6">
          <h1 class="text-4xl text-gray-700 font-medium leading-tight mb-4">
            Search
          </h1>
          <client-only>
            <ais-powered-by/>
          </client-only>
        </div>
        <ais-search-box
          placeholder="Search Snippets"
          :class-names="{
            'ais-SearchBox': 'w-full',
            'ais-SearchBox-input': 'w-full border-2 border-gray-400 rounded-lg block p-4 text-lg',
            'ais-SearchBox-submit': 'hidden',
            'ais-SearchBox-submitIcon': 'hidden',
            'ais-SearchBox-reset': 'hidden',
          }"
        /> 
      </div>      
    </div>
    <div class="container">
      <ais-state-results>
        <div slot-scope="{ query }">
          <template v-if="query.length">
            <ais-stats>
              <h1 
                class="text-xl font-medium text-gray-600 mb-6"
                slot-scope="{ nbHits }"
              >
                Snippets {{ nbHits }}
              </h1>  
            </ais-stats> 

            <ais-hits>
              <div slot="item" slot-scope="{ item }">
                <search-snippet-card
                  :snippet="item"
                />
              </div>
            </ais-hits> 
          </template>
        </div>
      </ais-state-results>      
    </div>
  </ais-instant-search-ssr>
</template>

<script>
import SearchSnippetCard from './components/SearchSnippetCard'
import {
  AisInstantSearchSsr,
  AisIndex,
  AisConfigure,
  AisRefinementList,
  AisHits,
  AisHighlight,
  AisSearchBox,
  AisStats,
  AisStateResults,
  AisPagination,
  createServerRootMixin,
  AisPoweredBy,
} from 'vue-instantsearch'; // eslint-disable-line import/no-unresolved
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  '3LEB06DEL9',
  'YzhmMTY0MGUzODQ2MDc4Y2Q0NTg0ZDZkY2EzMGEwNDU2ODJmMThlYTgzNjMzMWNmZmM1NjQwNDEyZTMyOWI3N2ZpbHRlcnM9aXNfcHVibGljJTNBdHJ1ZQ=='
);

export default {
  data () {
    return {
      results: null,
      key: null,
      indexName: 'snippets'
    }
  },
  mixins: [
    createServerRootMixin({
      searchClient,
      indexName: this.indexName,
    }),
  ],
  serverPrefetch() {
    return this.instantsearch.findResultsState(this).then(algoliaState => {
      this.$ssrContext.nuxt.algoliaState = algoliaState;
    });
  },
  beforeMount() {
    this.results = window.__NUXT__.algoliaState;

    this.instantsearch.hydrate(this.results);

  },
  components: {
    AisInstantSearchSsr,
    AisIndex,
    AisConfigure,
    AisRefinementList,
    AisHits,
    AisHighlight,
    AisSearchBox,
    AisStats,
    AisStateResults,
    AisPagination,
    SearchSnippetCard,
    AisPoweredBy
  },
  async asyncData ({ app }) {
    let key = await app.$axios.get('keys/algolia')
    return {
      key: key.data.data
    }
  },
  mounted () {
  
  },
  head() {
    return {
      title: 'Search'
    }
  }
};
</script>


When you call a function as a mixin, you don’t have access to this, which means that the indexName you passed to createServerRootMixin is undefined @havvtom

I followed the same documentation on the site using vue-instantsearch v3. I got the same error message “rootMixin is not defined”.

Seems like that rootMixin line isn’t required, removing it solved it for me.

hey @swsalim, thanks for mentioning that, which link has the issue (so we can remove rootMixin from it)?

Thanks!

It’s the last code snippets on this docs page.

You’ll notice there are 2 “mixins”.

1 Like

I see, I’ve made a PR to fix this!

1 Like