pow-co/BoostVue

A Vue 3 Button that can be used to boost content using proof of work

BoostVue

Props

Property	Type	Description
href	String	The URL to link to when the component is clicked, if the component is rendered as an a tag
type	String	The type attribute of the button or a tag
content	String	A required prop that is used as the content parameter in the wrapRelayx function
onSending	Function	An event handler that is called when the boost method begins to send a transaction
onSuccess	Function	An event handler that is called when the boost method successfully sends a transaction
onError	Function	An event handler that is called when the boost method encounters an error
onClick	Function	An event handler that is called when the component is clicked
id	String	The id attribute of the button or a tag
name	String	The name attribute of the button or a tag
size	String	The size of the component. Can be sm, md, or lg
outline	Boolean	If true, the component will have an outlined style instead of a filled style
icon	Boolean	If true, the component will have a smaller size and padding
round	Boolean	If true, the component will have rounded corners

Methods

Method	Description
boost	Async function that sends a transaction using the wrapRelayx function and handles the onSending, onSuccess, and onError events

Usage

const onBoostSuccess = (response) => { alert('boostpow success!', response) }

<BoostButton 
content="478756843fbd0d3ecaf150e0c67f23481f85560cad3d21ff61cb5472488330b2" 
:onSuccess="onBoostSuccess"
size="sm" 
round 
outline 
class="mt-4">
<p class="text-xl">🦚</p>
</BoostButton>

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Compile and Minify for Production

pnpm build

Run Unit Tests with Vitest

pnpm test:unit