ResultList creates a list UI component for a particular result item, it can be used with ReactiveList to display results in a list layout, suited for data that needs a compact display.

Example uses:

  • showing e-commerce search listings.
  • showing filtered hotel booking results.


An alternative layout to ResultList is a ResultCard, which displays result data in a card layout.


        <div slot="render" slot-scope="{ data }">
                    v-for="result in data"
                    <result-list-image :small="true" :src="result.image" />
                                    <em>by {{result.authors}}</em>
                                    <b>{{result.average_rating}}</b> ⭐
                                <span>Pub {{result.original_publication_year}}</span>


  • target string [optional] This prop is equivalent to the target attribute of html a tags. It defaults to _blank.
  • href string [optional] can be used to specify the URL of the page the link goes to


ResultList component accepts all the properties of html a tag.

Sub Components

  • ResultListImage use it to render the result list image.
    It accepts the following props:

    • src: string source url of the image
    • small: boolean defaults to false, if true then renders an image of small size.
  • ResultListContent use it to wrap the result list content other than image.
  • ResultListTitle renders the title of the result list.
  • ResultListDescription can be used to render the result list description UI.