The Post Component renders a single post anywhere in your theme. It can be used for blog articles, news items, custom post types, or any content stored as a post in Vvveb CMS. The component automatically loads the correct post based on ID or slug, or it can be configured manually.

To activate it, add:

data-v-component-post

Component Options

Options are added as HTML attributes using the data-v-* syntax. These control which post is loaded and how it is filtered.

Option Attribute Description Default
post_id data-v-post_id Load a post by ID. If set to url, the ID is taken from the GET parameter. url
slug data-v-slug Load a post by slug. If set to url, the slug is taken from the GET parameter. url
language_id data-v-language_id Language for post title and content. Current language
site_id data-v-site_id Site ID to load the post from (for multisite setups). Current site
type data-v-type Post type (e.g., post, news, event). post
status data-v-status Filter by post status: publish, draft, pending, private, scheduled. None
comment_count data-v-comment_count Include comment count (true/false). false
comment_status data-v-comment_status Filter comments by status: 1 = published, 0 = pending, 2 = spam, 3 = trash. 1

These options allow the component to load the correct post and adapt to multilingual, multisite, or custom post‑type setups.

Component Properties

Inside the component, post data is exposed through data-v-post-* attributes. These can be used to build any layout, from simple blog cards to full article pages.

Post Fields

Property Attribute Description
name data-v-post-name Post title
content data-v-post-content Full post content
excerpt data-v-post-excerpt Short excerpt
status data-v-post-status Post status (publish, disabled, scheduled)
image data-v-post-image Featured image
slug data-v-post-slug Post slug
url data-v-post-url Post detail page URL
meta_keywords data-v-post-meta_keywords SEO keywords
meta_description data-v-post-meta_description SEO description
type data-v-post-type Post type
password data-v-post-password Password for protected posts
comment_status data-v-post-comment_status Whether comments are allowed
comment_count data-v-post-comment_count Number of comments
views data-v-post-views Number of views
sort_order data-v-post-sort_order Sort order
template data-v-post-template Template used to render the post

HTML Example

<div data-v-component-post 
     data-v-slug="hello-world">

    <img data-v-post-image alt="Post image">

    <h1 data-v-post-name>Post name placeholder</h1>

    <span data-v-post-excerpt>Lorem ipsum</span>

    <div data-v-post-content>Lorem ipsum</div>

</div>

This example loads the post with the slug hello-world and displays its image, title, excerpt, and full content.

If you’re building a blog layout or a custom post type template, it helps to decide whether you want the component to auto-detect the post from the URL or always load a specific one.