Creating Search and SearchResults in Nuxt.js in SSG mode

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!

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.

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