Skip to content

MyEtherWallet/vue-common-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5d4030d · Jan 31, 2025

History

90 Commits
Nov 6, 2024
Jun 21, 2024
Jun 21, 2024
Jan 31, 2025
Aug 27, 2024
Sep 11, 2024
Jul 30, 2024
Jun 21, 2024
Jul 15, 2024
Oct 10, 2024
Jul 13, 2024
Jan 31, 2025
Jun 21, 2024
Aug 27, 2024
Jul 8, 2024
Jun 21, 2024
Aug 27, 2024
Nov 6, 2024

Repository files navigation

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.

COMPONENTS

  • vue header and vue footer
  • header as web component. Make sure to install vue and vue router when used. Use currUrl prop to pass current page url.
//in main.js
import { registerMewHeader, MewHeaderWebComponent } from '@myetherwallet/vue-common-components'
// Register MEW header and add event listner on consent change
registerMewHeader()
const MEWHeader = new MewHeaderWebComponent({
    currProject: "MEW_BLOG",
    bgVisible: true,
    userConsent: window.userConsent,
    amplitude: window.amplitude,
    currUrl: window.location.href
})
document.body.appendChild(MEWHeader)

// Add event listeners
const MEWHeaderShadow = document.querySelector("mew-header-web-component")
MEWHeaderShadow.addEventListener('update:consent', window.handleOptActionConsentChnage)
// Add to window object if you want to change component props
window.MEWHeader = MEWHeader

How to test this in another project

  1. Build and Pack the library
yarn build
yarn pack 
  1. Copy generated {x}.tgz file path
  2. install it in another prokect. IE in landing page project:
pnpm install {x}.tgz