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 Options

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

• user_id — Loads the user user with this ID. If set to url, the component will read the user_id from the URL query string. This is useful for author profile pages where the user ID is dynamic.
• username — Loads the user 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 user user.

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.