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.
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.
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 theonConnected
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.
<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:
<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>