nuxt3

vue-instantsearch/nuxt3/.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

vue-instantsearch/nuxt3/components/search.vue

@@ -0,0 +1,47 @@
+<template>
+  <ais-instant-search-ssr>
+    <ais-index
+      index-name="instant_search_demo_query_suggestions"
+      index-id="querySuggestions"
+    >
+      <ais-search-box />
+      <ais-configure :hits-per-page.camel="5" />
+      <ais-hits>
+        <template #item="{ item }">
+          <ais-highlight attribute="query" :hit="item" />
+        </template>
+      </ais-hits>
+      <ais-pagination />
+    </ais-index>
+    <ais-search-box />
+    <ais-stats />
+    <ais-index index-id="refinement" index-name="instant_search">
+      <ais-refinement-list attribute="brand" />
+    </ais-index>
+    <ais-hits>
+      <template #item="{ item }">
+        <p>
+          <ais-highlight attribute="name" :hit="item" />
+        </p>
+        <p>
+          <ais-highlight attribute="brand" :hit="item" />
+        </p>
+      </template>
+    </ais-hits>
+    <ais-pagination />
+  </ais-instant-search-ssr>
+</template>
+
+<script setup>
+import {
+  AisInstantSearchSsr,
+  AisIndex,
+  AisConfigure,
+  AisRefinementList,
+  AisHits,
+  AisHighlight,
+  AisSearchBox,
+  AisStats,
+  AisPagination,
+} from 'vue-instantsearch/vue3/es';
+</script>

vue-instantsearch/nuxt3/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "algoliasearch": "4.14.3",
+    "nuxt": "3.0.0",
+    "vue-instantsearch": "4.7.1"
+  }
+}

vue-instantsearch/nuxt3/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <h2>
+    Go to the search page: <nuxt-link to="/search"> "/search" </nuxt-link>
+  </h2>
+</template>
+
+<style>
+h2 {
+  text-align: center;
+}
+</style>

vue-instantsearch/nuxt3/pages/search.vue

@@ -0,0 +1,70 @@
+<template>
+  <Search />
+</template>
+
+<script setup>
+import { h, onServerPrefetch, onMounted, provide } from 'vue';
+import { createServerRootMixin } from 'vue-instantsearch/vue3/es';
+import algoliasearch from 'algoliasearch/lite';
+import { renderToString } from '@vue/server-renderer';
+import Search from '../components/search.vue';
+import { useNuxtApp } from '#app';
+
+const mixin = createServerRootMixin({
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
+  indexName: 'instant_search',
+  initialUiState: {
+    instant_search: {
+      query: 'iphone',
+      page: 3,
+    },
+    refinement: {
+      refinementList: {
+        brand: ['Apple'],
+      },
+    },
+    querySuggestions: {
+      query: 'k',
+      page: 2,
+      configure: {
+        hitsPerPage: 5,
+      },
+    },
+  },
+});
+
+const app = useNuxtApp();
+
+const { instantsearch } = mixin.data();
+
+provide('$_ais_ssrInstantSearchInstance', instantsearch);
+
+onServerPrefetch(async () => {
+  console.log('pre the load', this)
+  app.ssrContext.payload.algolia = await instantsearch.findResultsState({
+    // todo: what is the component? i don't see how to access the instance we currently are in
+    component: h(Search),
+    // this relies on a patch in createServerRootMixin, as the component would be a child likely
+    instantsearch,
+    renderToString,
+  });
+  console.log('past the load', app.ssrContext.payload.algolia)
+});
+
+onMounted(async () => {
+  console.log('mounting', app.ssrContext.payload.algolia)
+  instantsearch.hydrate(app.ssrContext.payload.algolia);
+});
+</script>
+
+<style>
+.ais-Hits-list {
+  text-align: left;
+}
+.ais-Hits-list:empty {
+  margin: 0;
+}
+.ais-InstantSearch {
+  margin: 1em;
+}
+</style>