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 {
AutocompleteComponents,
getAlgoliaResults,
HTMLTemplate,
} 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,
query,
params: {
attributesToSnippet: ['title:10', 'description:35'],
snippetEllipsisText: '…',
hitsPerPage: 15,
},
},
],
});
},
templates: {
header({ html }: { html: HTMLTemplate }) {
return html`
<div>
<span className="aa-SourceHeaderTitle">Articles</span>
<div className="aa-SourceHeaderLine" />
</div>
`;
},
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 <a href=${""} class="aa-ItemLink"> ArticlesPlugin </a> ;
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.
/Users/davidchoi/Work/philabs/archway-docs/components/Ui/Algolia/AlgoliaSearchInput.vue:47:31
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 | </div>
| ^
53 | <div className="aa-ItemContentBody">
54 | <div className="aa-ItemContentTitle"></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: