The Category Component displays a single taxonomy item (category or tag) along with its properties, such as name, description, image, and URL. It is typically used on category pages, sidebars, product filters, or anywhere you need to show details about a specific category.
You can load a category by ID, slug, or automatically from the current page URL.
Component Options
All options are added as HTML attributes using the data-v-* syntax.
| Option | Description | Default |
|---|---|---|
| taxonomy_item_id | Category/Taxonomy ID. If not provided, the component automatically detects the ID from the page URL when used on a category page. | URL‑based detection |
| slug | Category slug. Can be used instead of taxonomy_item_id to load a specific category. |
None |
| language_id | Load category content for a specific language. | Current language |
| site_id | Load category from a specific site. | Current site |
| type | Taxonomy type: categories or tags. |
categories |
| post_type | Post type for custom taxonomies (e.g., product, event). |
post |
You can combine slug, taxonomy_item_id, and post_type to load exactly the category you want.
Component Properties
Inside the component, category data is exposed through data-v-cat-* attributes.
These can be used to display category details in your HTML.
| Property | Attribute | Description |
|---|---|---|
| name | data-v-cat-name |
Category name |
| slug | data-v-cat-slug |
URL slug |
| content | data-v-cat-content |
Category description/content |
| url | data-v-cat-url |
Category URL |
| image | data-v-cat-image |
Category image |
| parent_id | data-v-cat-parent_id |
Parent category ID (0 = top level) |
| item_id | data-v-cat-item_id |
Category ID |
| sort_order | data-v-cat-sort_order |
Sort order |
| status | data-v-cat-status |
1 = enabled, 0 = disabled |
| language_id | data-v-cat-language_id |
Language ID for multilingual content |
These properties allow you to build fully custom category layouts.
Example Usage
<div class="card"
data-v-component-category
data-v-slug="toys"
data-v-post_type="post">
<a data-v-cat-url>
<h3 data-v-cat-name></h3>
</a>
<p data-v-cat-content></p>
<img data-v-cat-image src="demo/img/bg-img/bg-7.webp" alt="">
</div>
This example loads the category with slug toys, displays its name, description, and image, and links to the category page.