james0r
(James Auble)
March 8, 2022, 2:17am
1
The Prismic docs seem pretty light on this subject at least for Nuxt.
I found this example Search function for a Prismic.io / NuxtJS blog • VIARAMI but it only works for me in Dev mode.
When I go to generate the page I'm getting
ℹ Generating output directory: dist/ 18:09:20
ℹ Generating pages with full static mode 18:09:21
ERROR Error generating route "/search": Page not found
I'm assuming I need to somehow designate the search results page to fetch the data-client side so it doesn't have to generate a million different possibilities but I don't see how to do this.
Any help would be appreciated.
Thanks!
Phil
(Phil Snow)
March 8, 2022, 5:00pm
2
Hi James,
I think you're right that you'll need to set up some sort of search data side. We don't have any docs regarding this as it's more of a Nuxt question than a Prismic one, but I'll reach out to the team for some insight.
Thanks.
mortenhagh
(Morten Jensen)
April 10, 2023, 6:30am
6
I know this is an old post, but perhaps someone can use my solution.
I have a functioning search on a nuxt static site with this:
import Prismic from '@prismicio/client'
const endPoint = pageConfig.prismicApiUrl
const client = Prismic.client(endPoint)
watchQuery: ['search'],
beforeMount() {
if (this.$nuxt.$route.query.search != null) {
this.searchValue = this.$nuxt.$route.query.search
this.callNewSearch()
}
},
methods: {
async callNewSearch() {
this.$router.push({ path: '/search/', query: { search: this.searchValue } })
const query = this.searchValue
const searchresult = await client.query([Prismic.predicates.at('document.type', 'article'), Prismic.predicates.fulltext('document', query)], { orderings: '[document.first_publication_date desc]', pageSize: 9 })
this.result = searchresult.results
},
}
<form class="relative flex items-center justify-between w-full text-black bg-gray-300 text-white border border-white rounded-full p-4 border-black" @submit.prevent="callNewSearch">
<input id="search" v-model="searchValue" type="text" name="search" placeholder="Type your search..." class="bg-gray-300 text-black w-full outline-none appearance-none focus:outline-none active:outline-none" />
<button type="submit" class="outline-none focus:outline-none active:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 50 50" class="fill-current text-black mx-auto">
<path d="M21 3C11.602 3 4 10.602 4 20s7.602 17 17 17c3.355 0 6.46-.984 9.094-2.656l12.281 12.281 4.25-4.25L34.5 30.281C36.68 27.421 38 23.88 38 20c0-9.398-7.602-17-17-17Zm0 4c7.2 0 13 5.8 13 13s-5.8 13-13 13S8 27.2 8 20 13.8 7 21 7Z" />
</svg>
</button>
</form>
1 Like