Verida Documentation
  • Welcome
  • Network Overview
  • Start Building
  • Verida Wallet
  • Whitepapers
  • Glossary
  • Protocol
    • Core concepts
      • Design Principles
      • Decentralized Identity
      • Confidential Databases
      • Confidential Compute
      • Accounts and Identity
      • Data Storage
      • Application Contexts
      • Messaging
      • Schemas
      • Data Sharing
    • Client SDK
      • Getting Started
      • How It Works
      • Authentication
      • Data
      • Queries
      • Permissions
      • Messaging
      • Account Profiles
      • Events
      • Command Line Tools
      • Configuration
      • React Native
      • Advanced
    • Verida Connect SDK
      • Getting Started
      • WebUser
      • WalletConnect Support
      • Authentication Server
    • Blockchain Bridge
    • Run a Node
      • Database Node
        • Setup
        • Operations
        • FAQ
      • Compute Node
    • Verida Networks
  • Extensions
    • Credentials
      • Verifiable Credentials Developer SDK
      • cheqd Credential Service
      • Privado ID (fmr Polygon ID)
      • zkPass credentials
      • Reclaim Protocol credential
    • Verida URIs
    • Vue Components
Powered by GitBook
On this page
  • Usage​
  • Using the vda-login component​
  • Using the vda-account component​

Was this helpful?

  1. Extensions

Vue Components

PreviousVerida URIs

Last updated 9 months ago

Was this helpful?

Using the @verida/vue-account Vue components

Verida supplies open source Vue components for easy app development. See the for comprehensive documentation all options.

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

This supports Vue 3 only

Usage

Create a base vue project using the command below

 vue create myapp

install our Verida package.

yarn add  @verida/vue-account

The @verida/vue-account component library registration enables the vda-account and vda-login component to be accessed across your application.

main.js

import { createApp } from 'vue';
import App from './App.vue';
import Account from '@verida/vue-account';


const app = createApp(App);

app.use(Account);

app.mount('#app');
  • NOTE : You can retrieve the user application context from the parameter of the onConnected event emitter pass to the component .

This works for both the vda-login and vda-account

This component is used to handle authentication via Verida Connect, it leverages our @verida/client-ts and @verida/account-web-vault packages under the hood.

Home.vue

<template>
  <div id="app">
    <vda-login
      @onError="onError"
      @onConnected="onSuccess"
      :contextName="contextName"
      :logo="logo"
      :loginText: 'LOGIN_TEXT',
    />
  </div>
</template>

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

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

This component is used to display a logged in user's profile details such as name, did and avatar. If the user is not logged in, it will supply a login link and generate the single sign-on login form in the same way the vda-login component does.

  • Example code:

Login.vue

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

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

export default defineComponent({
  name: "Login",
  data() {
    return {
      contextName: "Verida: Account Component",
      logo: "https://assets.verida.io/verida_login_request_logo_170x170.png",
    };
  },
  methods: {
    onLogout() {
      console.log("Handle Logout");
    },
    onSuccess(response: any) {
      // The response is the application context of the connected user..
      console.log(response)
    },
    onError(error) {
      console.log("Login Error", error);
    },
  },
});
</script>

Using the vda-login component

Using the vda-account component

​
Verida Vue Components repo
the available props
​
​
​