The Posts component displays a list of posts anywhere in your theme. It supports pagination, filtering, sorting, taxonomy filtering, author filtering, and optional image galleries. This makes it suitable for blog pages, category pages, search results, or custom post listings.

Component Properties

Inside the component, the following repeatable post properties are available. Each post is wrapped in an element marked with data-v-post.

  • namedata-v-post-name — Post title.
  • contentdata-v-post-content — Post content.
  • excerptdata-v-post-excerpt — Post excerpt.
  • statusdata-v-post-status — Post status (publish, disabled, scheduled).
  • imagedata-v-post-image — Main post image.
  • slugdata-v-post-url — Post slug.
  • urldata-v-post-url — Post detail page URL.
  • meta_keywordsdata-v-post-meta_keywords — Post meta keywords.
  • meta_descriptiondata-v-post-meta_description — Post meta description.
  • typedata-v-post-type — Post type, default is post.
  • passworddata-v-post-password — Post password if is password protected.
  • comment_statusdata-v-post-comment_status — Post comment status, if comments are allowed or disabled
  • comment_countdata-v-post-comment_count — Number of comments on the post
  • viewsdata-v-post-comment_count — Number of views on the post
  • sort_orderdata-v-post-sort_order — Post sort order.
  • templatedata-v-post-template — Template used to render the post if a different template is used.

These properties repeat for each post returned by the component.


HTML Example

<div data-v-component-posts 
     data-v-limit="10" 
     data-v-page="2">

    <div data-v-post>
        <a href="#" data-v-post-url>
			<span data-v-post-name>Post name placeholder</span>
		</a>
        
        <span data-v-post-excerpt>Lorem ipsum</span>
        <span data-v-post-content>Lorem ipsum</span>
        
        <img src="" data-v-post-image>
        
        <a href="#" data-v-post-url>View post</a>
    </div>

</div>

This example loads 10 posts from page 2, without including the image gallery. Each post is rendered inside the data-v-post block.