Component admin

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 Options

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

• admin_id — Loads the admin user with this ID. If set to url, the component will read the admin_id from the URL query string. This is useful for author profile pages where the admin ID is dynamic.
• username — Loads the admin user with this username. If set to url, the component will read the username from the URL query string.

Only one of these options is required. If both are omitted, the component displays the currently authenticated admin user.

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.