New search feature is not working

[cfab]

Environment

Now using node v20.8.0 (npm v10.1.0) ❯ npx nuxi info Working directory: /Users/f/Desktop/content 14:08:14 Nuxt project info: (copied to clipboard) 14:08:14

---

• Operating System: Darwin
• Node Version: v20.8.0
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.2
• Package Manager: yarn@1.22.19
• Builder: -
• User Config: devtools, modules, content
• Runtime Modules: @nuxt/content@2.9.0

• Build Modules: -

Reproduction

https://github.com/cfab/content-bug.git

Describe the bug

I was trying out the new search featured added in content v 2.9.

• I created a nuxt-content site with npx nuxi@latest init content-app -t content
• added then a search page (search.vue) with the example form the doc.
• modified also about with some text for the search to have some content
• added a link to search page from the home content.

On /search we get this error - apparently computed is not defined in the searchContent composable...

search.mjs?t=1698584228061&v=a75ea5b3:41 Uncaught (in promise) ReferenceError: computed is not defined at useIndexedMiniSearch (search.mjs?t=1698584228061&v=a75ea5b3:41:29) at searchContent (search.mjs?t=1698584228061&v=a75ea5b3:21:22) at async setup (search.vue?t=1698584288756:26:104)

Additional context

No response

Logs

No response

[qmarcos]

The same here.

You can avoid the error you commented importing computed in your script setup:

<script setup>

import { computed } from 'vue';

const search  = ref('');
const results = searchContent(search);

</script>

But then you get additional similar errors, the next one that happened to me related to createError.

Uncaught (in promise) ReferenceError: createError is not defined
    at searchContent (search.mjs?v=9cca6f01:16:7)

[billsuxx]

same here, with node 18, nuxt 3.8.0 and nuxt/content 2.9.0

search.mjs?v=3cb731eb:41 Uncaught (in promise) ReferenceError: computed is not defined
    at useIndexedMiniSearch (search.mjs?v=3cb731eb:41:29)
    at searchContent (search.mjs?v=3cb731eb:21:22)

[nobkd]

@Barbapapazes You're probably the person for this.

[Barbapapazes]

Oh 🙁 I need to import every thing since we are on a module (I think it's the issue, will take a look asap)

[teamupdivision]

when is the next release for nuxt content planned? The current 2.9.0 one does not contain this fix. Thanks! @Barbapapazes

[Barbapapazes]

when is the next release for nuxt content planned? The current 2.9.0 one does not contain this fix. Thanks! @Barbapapazes

You can use the edge release in the meantime: https://content.nuxt.com/get-started/edge-channel

[Priccc]

The searchContent api return a promise. so need use useAsyncData for it. I use this way is work. const { data, refresh } = await useAsyncData(() => searchContent(searchKey, {}))

[rasensio]

I am still struggling how to get the data from const { data } . If i assign the value to a ref() I'm still getting null. For example.

<script setup>
const results = ref({})
const query = ref('')

const async search = () => {
  const { data, refresh } = await useAsyncData(() => searchContent(query))
  // data is a ref but value is null. 
  // the api call returns an object 

  // if I do this, 
  results.value = data // or data.value I still get nothing
}
</script>

[JamieCurnow]

@rasensio I'm not sure if it's the correct way, but I'm doing a similar thing to you and it works like this:

const searchString = ref('')
const results = ref([])
const searching = ref(false)

const search = async () => {
  searching.value = true
  const res = await searchContent(searchString.value, {})
  results.value = res.value // res is a computed so we pluck out the .value and just add it to our ref
  searching.value = false
}

[andreyquerino]

I use the <ContentList> component directly.

<script lang="ts" setup>
const searchString = ref('')
</script>

<template>
  <main max-w-xl mxauto my10>
    <input v-model="searchString" >

    <ContentList v-if="searchString" :path="`/posts/${searchString}`" fields="title, thumbnail, date" 
        :query="{
            draft: false,
            sort: [
                {
                    date: -1
                }
            ]
        }" v-slot="{ list }">

            {{ list }}

     </ContentList>

  </main>
</template>

Or

<script lang="ts" setup>
const searchTerm = ref('')

const { data: articles, refresh } = await useAsyncData('posts', () =>
    queryContent('posts')
        .only(['title', 'description', 'thumbnail', 'url'])
        .where({
            $or: [
                { title: { $contains: searchTerm.value } },
                { description: { $contains: searchTerm.value } },
                { url: { $contains: searchTerm.value } }
            ]
        })
        .limit(10)
        .find()
)

const search = () => {
    refresh()
}
</script>

<template>
    <main max-w-xl mxauto my10>
        <input v-model="searchTerm" @input="search">
        <ul v-if="searchTerm">
            <li v-for="article in articles">
                <pre>{{ article }}</pre>
            </li>
        </ul>
    </main>
</template>