@verida/vue-credentials-view

Verida verifiable credentials display component

Open Source Vue Components for Verida

• This component can be customized to suite your application styles and themes .

NB: This supports vue 3 only

Usage

yarn add  @verida/vue-credentials-view3

Using the component

This component is used to handle SSO (Single Sign on) login it leverages our @verida/client-ts and @verida/account-web-vault packages under the hood

<script lang="ts">
import { defineComponent } from "vue";
import VerifiableCredentialDisplay from "@verida/vue-credentials-view";

export default defineComponent({
  name: "Login",
  data() {
    return {
      contextName: "Verida: Account Component",
      logo: "https://assets.verida.io/verida_login_request_logo_170x170.png",
    };
  },
  methods: {
    onSuccess(response: any) {
      this.$vdaClient.initUser(response);
    },
    onError(error: Error) {
      console.log("Login Error", error);
    },
  },
});
</script>

<template>
  <div id="app">
    <vda-login
      :onError="onError"
      :onSuccess="onSuccess"
      :contextName="contextName"
      :logo="logo"
      :onLogout="onLogout"
    />
  </div>
</template>

Using the vda-account component

This component is used to display a logged-in user profile details such as name , didand avatar this happens after the vda-login component has been used for performing and SSO (Single Sign on) Login .

<script lang="ts">
import { defineComponent } from "vue";

const schemaSpecs = {
  $schema: "https://json-schema.org/draft/2020-12/schema",
  $id: "https://common.schemas.verida.io/social/contact/v0.1.0/schema.json",
  title: "Contact",
  titlePlural: "Contacts",
  description: "A record of a contact",
  type: "object",
  appearance: {
    style: {
      color: "#FD4F64",
      icon: "./icon.svg",
    },
    nameField: "name",
    summaryField: "summary",
  },
  database: {
    name: "social_contact",
    indexes: {
      email: ["email"],
      did: ["did"],
      name: ["lastName", "firstName"],
      schema: ["schema"],
    },
  },
  layouts: {
    create: ["firstName", "lastName", "email", "mobile", "did"],
    view: ["firstName", "lastName", "email", "mobile", "did"],
  },
  properties: {
    name: {
      title: "Name",
      description: "Name of the item within card list and details",
      type: "string",
    },
    summary: {
      title: "Summary",
      description: "Brief summary of item",
      type: "string",
      maxLength: 100,
    },
    "   ": {
      title: "Archived",
      description: "Is this record archived?",
      type: "boolean",
    },
    schema: {
      title: "Schema",
      description: "URI of the schema for this record",
      type: "string",
    },
    signatures: {
      title: "Signatures",
      description: "Signatures verifying this data has been signed",
      type: "object",
    },
    sourceApplication: {
      title: "Source application",
      description: "Name of the application this data was sourced from",
      type: "string",
    },
    icon: {
      title: "Icon",
      description:
        "URL of an icon for this record. Must be square, prefer SVG, otherwise minimum 50p x 50p",
      type: "string",
    },
    insertedAt: {
      title: "Inserted",
      description: "Date/time this record was inserted",
      type: "string",
      format: "date-time",
    },
    modifiedAt: {
      title: "Modified",
      description: "Date/time this record was modified",
      type: "string",
      format: "date-time",
    },
    firstName: {
      title: "First Name",
      type: "string",
    },
    lastName: {
      title: "Last Name",
      type: "string",
    },
    email: {
      title: "Email",
      type: "string",
      format: "email",
    },
    mobile: {
      title: "Mobile",
      type: "string",
    },
    did: {
      title: "DID",
      type: "string",
    },
  },
  required: ["schema", "firstName", "lastName"],
};
const testVcData = {
  name: "Vitalik Buterin",
  firstName: "Vitalik",
  lastName: "Buterin",
  email: "[e-mail]",
  schema: "https://common.schemas.verida.io/social/contact/v0.1.0/schema.json",
};


export default defineComponent({
  name: "ServeDev",
  components: {
    VerifiableCredentialDisplay,
  },
  data: () => ({
    testVcData,
    schemaSpecs,
  }),
});
</script>

<template>
  <div id="app">
    <verifiable-credential-display :schema="schemaSpecs" :data="testVcData" />
  </div>
</template>

Props

1. vda-account

Props	Type	Required	Description
schema	object	false	you can retrieve the schema specifications from our docs here schemas
data	object	true	This the object verifiable credential data that will be displayed in the component.

Styling

Styling class that can be customized

• vda-vc-display

• vda-vc-display h2

• vda-vc-content

• vda-vc-content-title

• vda-vc-content-value