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 Options

Each option can be added as an HTML attribute using the data-v-* syntax.

  • start — Starting offset for pagination. Default: 0.
  • limit — Number of posts to display. Default: 4.
  • page — Page number for pagination. Total pages = total posts ÷ limit.
  • language_id — Language ID for post title and content. Default: current language.
  • site_id — Site ID to load posts from. Default: current site.
  • type — Post type. Default: post. Useful for custom post types.
  • manufacturer_id — Filter by manufacturer ID. Default: null.
  • vendor_id — Filter by vendor ID. Default: null.
  • order — Field used for sorting. Options: post_id, price, date_added, date_modified.
  • direction — Sorting direction. Options: asc, desc.
  • taxonomy_item_id — Filter by taxonomy (category, tag, collection, etc.).
  • include_image_gallery — Include post gallery images. Useful for hover image swap. Default: true.
  • post_id — Filter by one or more post IDs. Accepts single value or comma‑separated list (e.g., 1,2,3).
  • search — Filter posts by title or content containing the search term.
  • slug — Filter by post slug. Accepts single value or comma‑separated list (e.g., slug-1,slug-2).
  • admin_id — Filter posts by author admin_id.
  • username — Filter posts by author username (e.g., admin).
  • date_format — Format for displaying the post creation date. Accepts any PHP date format or the keyword human for human‑friendly dates.
  • sticky — Include sticky posts in the results.

Component Properties

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

  • name — data-v-post-name — Post title.
  • content — data-v-post-content — Post content.
  • excerpt — data-v-post-excerpt — Post excerpt.
  • status — data-v-post-status — Post status (publish, disabled, scheduled).
  • image — data-v-post-image — Main post image.
  • slug — data-v-post-url — Post slug.
  • url — data-v-post-url — Post detail page URL.
  • meta_keywords — data-v-post-meta_keywords — Post meta keywords.
  • meta_description — data-v-post-meta_description — Post meta description.
  • type — data-v-post-type — Post type, default is post.
  • password — data-v-post-password — Post password if is password protected.
  • comment_status — data-v-post-comment_status — Post comment status, if comments are allowed or disabled
  • comment_count — data-v-post-comment_count — Number of comments on the post
  • views — data-v-post-comment_count — Number of views on the post
  • sort_order — data-v-post-sort_order — Post sort order.
  • template — data-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.