Admin Component

The admin component displays information about an administrator user. If no admin_id or username is provided, the component automatically shows the currently logged‑in admin user. This makes it useful for author profile pages, dashboards, or any template where admin details are needed.

Component Properties

The following properties are available inside the component. Each property can be used with its corresponding data-v-admin-* attribute.

• 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 — URL of the admin’s profile avatar.
• cover_url — data-v-admin-cover_url — URL of the admin’s cover/background image.
• url — data-v-admin-url — Link to the admin’s public profile page.
• username — data-v-admin-username — Admin’s username.
• 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 used 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).

HTML Example

<div data-v-component-admin data-v-admin_id="url" class="profile">

	<div data-v-if="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 loads the admin profile based on the admin_id found in the URL. All admin details are displayed using the component’s data attributes.