How to load the content of a json file into a ContentSearch

[Rainer Arencibia]

Description

Hi, gang,

I'm trying to load the content of a json file using Nuxt3 and UI Pro but everything I have tried didn't work so now I'm asking for help. The goal is to show a list of companies' names and symbols in the ContentSearch modal.

This use case will help a lot of people as I couldn't find anything relevant about this topic.

Thanks!

The json file is inside /content/companies.json
Content of the json file: {"APPL": "Apple Inc.", "GOOGL": "Alphabet Inc."}

I'm using the latest version of every package.

nuxt.config.ts:
ssr: true, content: { documentDriven: true, experimental: { search: { indexed: true }, }, },

app.vue:
import type { ParsedContent } from '@nuxt/content/dist/runtime/types' const { data: files } = useLazyFetch<ParsedContent>('/api/search.json', { server: false }) provide('files', files) <ClientOnly> <LazyUContentSearch :groups="groups" :navigation="navigation" :files="files" /> </ClientOnly>

/server/api/search.json.get.ts:
import { serverQueryContent } from '#content/server'
export default eventHandler(async (event) => { return serverQueryContent(event).where({ title: 'search_biz' }).findOne() })

[Benjamin Canac]

I'm not sure to understand what you're trying to achieve, have you checked the documentation of the ContentSearch component? https://ui.nuxt.com/pro/components/content-search#usage

It shows an example with @nuxt/content.