Skip to main content

Vue Components

Using the @verida/vue-account Vue components​

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

info

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

NB: 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

Using the vda-login component​

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>

Using the vda-account component​

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>