Component admin

The admins component displays a list of administrator users. It supports pagination, filtering, and searching, making it useful for author listings, team pages, or admin 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. Default: 0.
• limit - Number of admin users to display per page, overridable from URL. Default: 4.
• status - Filter by account status (1 for enabled, 0 for disabled). Default: 1.
• search - Search by username, first name, or last name.
• admin_id - Filter by one or more admin IDs. Accepts a single value or a comma‑separated list.

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

Component Properties

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

• first_name - data-v-admin-first_name - Admin’s first name.
• last_name - data-v-admin-last_name - Admin’s last name.
• avatar_url - data-v-admin-avatar_url - Profile avatar image URL.
• cover_url - data-v-admin-cover_url - Cover or background image URL.
• url - data-v-admin-url - Public profile page URL.
• username - data-v-admin-username - Username used for login.
• display_name - data-v-admin-display_name - Public display name.
• website - data-v-admin-website - Personal or professional website.
• email - data-v-admin-email - Internal email for login and notifications.
• public_email - data-v-admin-public_email - Publicly visible email address.
• bio - data-v-admin-bio - Short biography or description.
• created_at - data-v-admin-created_at - Account creation timestamp.
• updated_at - data-v-admin-updated_at - Last update timestamp.
• role_id - data-v-admin-role_id - Role ID assigned to the admin.
• role - data-v-admin-role - Role name (e.g., Administrator, Editor).
• last_ip - data-v-admin-last_ip - Last login IP address.
• phone_number - data-v-admin-phone_number - Public phone number (if provided).

These properties repeat for each admin returned by the component.

HTML Example

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

	<div data-v-admin>

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

			<div class="avatar">
				<img data-v-admin-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-admin-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-admin-username>username</span></div>

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

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

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

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

		</div>

	</div>

</div>

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