<template>
<div>
<input
v-model="searchQuery"
type="search"
autocomplete="off"
placeholder="Search Articles"
/>
<ul v-if="articles.length">
<li
v-for="article in articles"
:key="article.slug"
>
<NuxtLink v-if="$i18n.locale === 'ru'" :to="{ name: 'articles-slug', params: { slug: article.slug } }">
{{ article.title }}
</NuxtLink>
<NuxtLink
v-else
:to="$route.fullPath.replace(/^\/[^\/]+/, `articles/${article.slug}`)"
>
{{ article.title }}
</NuxtLink>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'SearchInput',
data() {
return {
searchQuery: '',
articles: []
}
},
watch: {
async searchQuery({ app, searchQuery }) {
if (!searchQuery) {
this.articles = []
return
}
this.articles = await this.$content(`/articles/${ app.i18n.locale }`)
.limit(6)
.search(searchQuery)
.fetch()
}
}
}
</script>
I am working on a content module for Nuxt with i18n localization. The example I am using is for an article search component outside of the typical Nuxt/Content setup. The logic dictates that it should go to the "articles" folder and generate links to nested translations. However, I am facing an issue where the array remains empty when trying to include these nested directories. Interestingly, when testing directly with "articles/array.md", everything works fine. But when I add parameters to the searchQuery such as 'app' and include the paths for 'en' and 'ru' within backticks to repeat from the URL, the array remains empty without any errors. What could be causing this problem?