Component users

Improve the following documentation for Users component in Vvveb CMS

The users component displays a list of useristrator users. It supports pagination, filtering, and searching, making it useful for author listings, team pages, or user management sections within a theme.

Component Options

Add any option as an HTML attribute using the data-v-* syntax.

• start - Starting offset for pagination. Useful when manually controlling the list position.
• limit - Number of user users to display per page.
• status - Filter by account status (1 for enabled, 0 for disabled).
• search - Search by username, first name, or last name.
• user_id - Filter by one or more user IDs. Accepts a single value or a comma‑separated list.

These options allow you to build flexible user listings, from simple team pages to filtered author directories.

Component Properties

Each user user is wrapped in an element marked with data-v-user.
Inside each element, the following properties are available:

• first_name - data-v-user-first_name - User’s first name.
• last_name - data-v-user-last_name - User’s last name.
• avatar_url - data-v-user-avatar_url - Profile avatar image URL.
• cover_url - data-v-user-cover_url - Cover or background image URL.
• url - data-v-user-url - Public profile page URL.
• username - data-v-user-username - Username used for login.
• display_name - data-v-user-display_name - Public display name.
• website - data-v-user-website - Personal or professional website.
• email - data-v-user-email - Internal email for login and notifications.
• public_email - data-v-user-public_email - Publicly visible email address.
• bio - data-v-user-bio - Short biography or description.
• created_at - data-v-user-created_at - Account creation timestamp.
• updated_at - data-v-user-updated_at - Last update timestamp.
• last_ip - data-v-user-last_ip - Last login IP address.
• phone_number - data-v-user-phone_number - Public phone number (if provided).

These properties repeat for each user returned by the component.

HTML Example

<div data-v-component-users data-v-limit="4">

	<div data-v-user>

		<div class="profile-header">
			<div class="cover">
				<img src="" data-v-user-cover_url>
			</div>

			<div class="avatar">
				<img data-v-user-avatar_url class="rounded-circle avatar" alt="Profile Picture">
			</div>
		</div>

		<div class="px-3 m-3 me-5 d-flex justify-content-between">
			<div>
				<h1 class="h3 m-0" data-v-user-display_name>User</h1>
			</div>

			<div class="social-links d-inline-block">
				<!-- Optional social links -->
			</div>
		</div>

		<div class="px-3 m-3 me-5 d-flex">

			<div>
				<div class="text-muted">@<span data-v-user-username>username</span></div>

				<div>
					<a class="d-block" data-v-user-website href="#">
						<span data-v-user-website>example.com</span>
					</a>

					<a class="d-block text-body small" href="#">
						<span data-v-user-public_email>user@vvveb.com</span>
					</a>

					<a class="d-block text-body small" href="#">
						<span data-v-user-phone_number>123456</span>
					</a>
				</div>
			</div>

			<div class="ms-5">
				<div data-v-user-bio>My bio</div>
			</div>

		</div>

	</div>

</div>

This example displays a list of up to four user users, each rendered using the available user properties.