@evan.network/ui-vue-core

ui-vue-core

The ui-vue-core for evan.network includes specific vue components, helper functions and utilities. By using the vue initialization helper functions, it's very easy to setup a vue application including everything:

• features
  • global vue components
  • i18n
  • routing
  • Form building
  • evan.network blockchain-core runtime integration
  • DApp initialization && nested DApp loading
  • Sidebar integrations
  • login / logout mechanisms
• documentation
  • How to use it for creating DApps: Wiki
  • UI API Doc
  • Reference Projects:
    • addressbook.vue
    • digital-twin-detail
    • digital-twin-lib
    • favorites.vue
    • mailbox.vue
    • onboarding.vue

Installation

npm i @evan.network/ui-vue-core

Usage

The vue-core.ts is the main entry point for all vue applications. For a detailed usage explanation have a look at the evannnetwork wiki.

import Vue from 'vue';
import { initializeVue } from '@evan.network/ui-vue-core';

import Main from './components/root/root.vue';
import translations from './i18n/translations';
import routes from './routes';
import components from './components/registry';

export async function startDApp(container: any, dbcpName: any, dappEnsOrContract: any, dappBaseUrl: any) {
  await initializeVue({
    components,
    container,
    dappBaseUrl,
    dappEnsOrContract,
    dbcpName,
    RootComponent: Main,
    routes,
    state: { },
    translations: translations,
    Vue: Vue,
  });
}

HTML Selectors for tests

dapp-wrapper

• #dapp-home

• #dapp-digitaltwins

• #dapp-favorites

• #dapp-addressbook

• #dapp-mailbox

• #dapp-faq

• #dapp-documentation

• #toggle-sidebar

• #dropdown-mailbox

  • #dapp-mailbox
  • #dropdown-mailbox-${ index }

• #dropdown-queue

  • #dropdown-queue-${ index }

• #dropdown-profile

  • #dapp-contacts
  • #dapp-favorites
  • #dapp-mailbox
  • #dapp-profile
  • #logout

Breadcrumbs

• #breadcrumb-goback

Modals

• #modal-cancel

evan-file-input

• #file-input-remove-modal
  • #file-input-remove-accept
  • Modals
• #file-input-remove
• #file-input-download-${ index }
• #file-input-upload