nuxt-x-affiliate
Search Results
Search results page with query-aware headline, optional facet summary, and result cards. Pairs with XAFSearchBar and XAFPagination.
Search Results
The XAFSearchResults component renders the search results page. Reads the query from the URL via useRoute().query.q, so it pairs naturally with <XAFSearchBar> (which navigates to /search?q=... on Enter).
Components
<XAFSearchResults />
<XAFSearchResults :results="results" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
results | SearchResult[] | required | The result set (already filtered by the consuming page) |
query | string | — | Override the query (defaults to useRoute().query.q) |
showQueryHeading | boolean | true | Show "Results for "{query}"" heading |
emptyMessage | string | 'No results found.' | Empty state message |
columns | 1 | 2 | 1 | Result card layout |
Result shape
interface SearchResult {
slug: string
title: string
excerpt?: string
image?: string
href?: string // defaults to /reviews/{slug}
category?: string
rating?: number
reviewCount?: number
publishedAt?: string
}
Usage
Typical /search page:
<script setup lang="ts">
const route = useRoute()
const q = computed(() => String(route.query.q ?? ''))
const { data: results } = await useAsyncData(
() => `search-${q.value}`,
() => queryContent('/reviews').where({ title: { $contains: q.value } }).find(),
{ watch: [q] }
)
</script>
<template>
<XAFSearchResults :results="results ?? []" />
<XAFPagination
v-if="results && results.length > pageSize"
:current-page="currentPage"
:total-pages="Math.ceil(results.length / pageSize)"
base-url="/search"
/>
</template>
Tips
- The component doesn't filter — pass in a pre-filtered result set from your data source (Nuxt Content, Algolia, a custom API).
- For filtered search, pair with
<XAFSearchFilters>to add a filter sidebar. - Pair with
<XAFPagination>if you paginate results.
AI Context
component: XAFSearchResults
package: "@xenterprises/nuxt-x-affiliate"
use-when: Search results page that reads the query from the URL