Components in Vvveb CMS act as dynamic data providers that connect your theme’s HTML with backend logic. They allow you to display products, posts, users, menus, carts, and many other types of content without writing custom queries. Each component has a PHP file that retrieves data and a template file that binds that data to HTML using the Vtpl templating engine.

How components work in a theme

Components are placed directly inside your theme’s HTML using the data-v-component-* attribute. Inside the component, child elements use data-v-* bindings to display dynamic values.

<div data-v-component-products>
	<div data-v-product>
		<span data-v-product-name>Product name placeholder</span>
		<span data-v-product-price>$100</span>
	</div>
</div>

When the page is rendered, the component loads the appropriate PHP logic, fetches the data, and injects it into the HTML structure.

Where component logic and templates are stored

Each component has two parts:

  • A PHP file that retrieves data from the database
  • A template file that binds the data to HTML using Vtpl template engine
app/
├── components/
│   ├── products.php      ← backend logic for products component
│   ├── posts.php         ← backend logic for posts component
│   ├── cart.php          ← backend logic for cart component
│   └── ...
└── template/
    └── components/
        ├── products.tpl  ← template for products component
        ├── posts.tpl     ← template for posts component
        ├── cart.tpl      ← template for cart component
        └── ...

The .php file prepares the data, and the .tpl file defines how that data appears in the theme.

Template engine

Component templates use the Vtpl templating engine, which allows you to:

  • Loop through items
  • Insert variables
  • Use conditions
  • Bind dynamic values to HTML attributes

This makes it easy to customize how component data appears in your theme.

Available components

Vvveb CMS includes a wide range of built‑in components for e‑commerce, content, user management, navigation, and more.

These components can be combined to build dynamic pages without writing custom backend code.