Create custom modal Autocomplete search drop down

I saw this control from Docusaurus and would like to build a version using Autocomplete on Vue/Nuxt 3. It’s a modal sitting in the center of the page, as opposed to just below the search box. I would also like the categories like Validators, Rewards, etc. How can I do this?

Hi @david.choi

We call that type of interface “detached mode” and you can absolutely build this with Autocomplete

Read more about it here:

Thank you for the response. Now I was trying to convert your Preact based sample here @algolia/autocomplete-example-reshape - CodeSandbox

But it’s causing nuxt to fail to build with error 500 on the ProductsPlugin. Do you have a similar sample that uses vue/nuxt and allows for showing grouped autocomplete results like the sample?

This is the error and code:
at /components/Ui/Algolia/ArticlesPlugin.ts ] {
statusCode: 500,
fatal: false,
unhandled: false,
statusMessage: ‘Vite Error’,
__nuxt_error: true

ERROR 5:57:33 PM [vite] Internal server error: Missing “./dist/app/nuxt” export in “nuxt” package 17:57:33
Plugin: vite:import-analysis
File: /Users/davidchoi/Work/philabs/archway-docs/components/Ui/Algolia/ArticlesPlugin.ts
at bail (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:32678:8)
at resolve (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:32755:10)
at resolveExports (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:34135:12)
at resolveDeepImport (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:34153:31)
at tryNodeResolve (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:33842:20)
at Context.resolveId (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:33602:28)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.resolveId (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40462:32)
at async TransformContext.resolve (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40227:23)
at async normalizeUrl (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:37137:34)
at async TransformContext.transform (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:37278:47)
at async Object.transform (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40534:30)
at async loadAndTransform (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:36921:29)

import {
} from '@algolia/autocomplete-js';
import { BaseItem } from '@algolia/autocomplete-core';
import { AlgoliaArticleIndex, AlgoliaAutocompleteTemplateItem } from '@/types';
import { useRuntimeConfig } from 'nuxt/dist/app/nuxt';

const { algolia } = useRuntimeConfig();
const algoliaRef = useAlgoliaRef(); 

export const articlesPlugin = {
  getSources({ query }: { query: string }) {
    if (!query) {
      return [];

    return [
        sourceId: 'articles',
        getItems() {
          return getAlgoliaResults<AlgoliaArticleIndex>({
            searchClient: algoliaRef,
            queries: [
                indexName: algolia.docIndex,
                params: {
                  attributesToSnippet: ['title:10', 'description:35'],
                  snippetEllipsisText: '…',
                  hitsPerPage: 15,
        templates: {
          header({ html }: { html: HTMLTemplate }) {
            return html`
                <span className="aa-SourceHeaderTitle">Articles</span>
                <div className="aa-SourceHeaderLine" />
          item({ item, components, html }: AlgoliaAutocompleteTemplateItem) {
            return html`<div></div>`;
          noResults() {
            return 'No articles for this query.';

Also the second link you sent me I was wondering why it looked strange this is jsx. You can see it by the use of className and {} for attribute values. This is not Vue template code.

I know what the issue is but don’t know how to resolve it. When string dom is imported it gets encoded. Like this

html &lt;a href=${""} class="aa-ItemLink"&gt; ArticlesPlugin &lt;/a&gt; ;

So having a plugin in a separate file does not work.

I tried the code from your second link and it’s not valid vue so it fails to compile nuxt. I’m using Nuxt 3 not Vue core.

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
50 |                              height="40"
51 |                            />
52 |                          </div>
   |                                ^
53 |                          <div className="aa-ItemContentBody">
54 |                            <div className="aa-ItemContentTitle">
    at formatError (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40281:46)
    at TransformContext.error (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40277:19)
    at TransformContext.transform (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:37078:22)
    at async Object.transform (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40534:30)
    at async loadAndTransform (file:///Users/davidchoi/Work/philabs/archway-docs/node_modules/vite/dis

Looks like it’s being encoded during the import.

52 |                          &lt;/div&gt;
   |                                ^
53 |                          &lt;div className="aa-ItemContentBody"&gt;
54 |                            &lt;div className="aa-ItemContentTitle"&gt;</pre><br>

I know Autocomplete leans pretty heavily on preact for templating, regardless of framework. Unfortunately I don’t have a better Nuxt example as I don’t use Nuxt myself. Let me see if I can get anyone else who might be able to help you here.

Hey @david.choi

Our Ambassador Jakub Andrzejewski maintains a module that helps quite a bit with this type of integration. He’s offered his help over on the repo site: