Component user

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

Component Properties

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

• first_name — data-v-user-first_name — Admin’s first name.
• last_name — data-v-user-last_name — Admin’s last name.
• avatar_url — data-v-user-avatar_url — URL of the user’s profile avatar.
• cover_url — data-v-user-cover_url — URL of the user’s cover/background image.
• url — data-v-user-url — Link to the user’s public profile page.
• username — data-v-user-username — Admin’s username.
• 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 used 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.
• role_id — data-v-user-role_id — Role ID assigned to the user.
• role — data-v-user-role — Role name (e.g., Administrator, Editor).
• last_ip — data-v-user-last_ip — Last login IP address.
• phone_number — data-v-user-phone_number — Public phone number (if provided).

HTML Example

<div data-v-component-user data-v-user_id="url" class="profile">

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