Vue

Installation

npm install @grasco/profile-picture

Setup

Vue uses the Web Components directly. Configure Vue to recognize custom elements:

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) =>
            tag === 'profile-picture' || tag === 'profile-picture-group',
        },
      },
    }),
  ],
});

Import

<script setup lang="ts">
import '@grasco/profile-picture/standalone';
import { setCdnBaseUrl } from '@grasco/profile-picture';
import { onMounted } from 'vue';

onMounted(() => {
  setCdnBaseUrl('https://api.grasco.dev');
});
</script>

Usage

<template>
  <profile-picture
    :src="avatarUrl"
    alt="Kerry Nicholson"
    size="xl"
    variant="circle"
    :border="true"
    border-color="white"
    :presence="JSON.stringify({ status: 'online', animate: true })"
    :badge="JSON.stringify({ content: 3, position: 'top-right' })"
    @load="handleLoad"
    @error="handleError"
    @profile-picture-click="handleClick"
  />
</template>

Note: Complex objects (presence, badge, ring, glow, interactive) must be passed as JSON strings when using Web Components in Vue. Alternatively, use :attr.prop binding.

Group Example

<template>
  <profile-picture-group :max="4" size="lg" @avatar-click="handleAvatarClick">
    <profile-picture
      v-for="user in users"
      :key="user.id"
      :src="user.avatar"
      :alt="user.name"
      :data-user-id="user.id"
    />
  </profile-picture-group>
</template>

TypeScript

import type { Size, Variant, PresenceStatus } from '@grasco/profile-picture';