Quick Start
Get your first haex-vault extension running in just 5 minutes.
Overview
In this guide, you'll create a simple extension that demonstrates the core SDK features. By the end, you'll have a working extension ready for development.
Prerequisites
Before you begin, make sure you have the following installed:
Node.js 18+
JavaScript runtime for building extensions
haex-vault
Required for testing your extension Download
Create Your Project
We'll use Vite with Vue, but you can use any framework (React, Svelte, or vanilla JS).
1 Initialize Project
Create a new Vite project and install the SDK:
# Create a new Vite project
npm create vite@latest my-extension -- --template vue-ts
# Navigate to project
cd my-extension
# Install dependencies
npm install
# Install the SDK
npm install @haex-space/vault-sdk
# Initialize extension structure
npx haex init
2 Configure the Plugin
Update your main.ts to use the haex plugin:
// src/main.ts
import { createApp } from 'vue'
import { createHaexPlugin } from '@haex-space/vault-sdk/vue'
import App from './App.vue'
import './style.css'
const app = createApp(App)
app.use(createHaexPlugin())
app.mount('#app')
3 Use the SDK
Replace your App.vue with this example:
<!-- src/App.vue -->
<script setup lang="ts">
import { useHaexClient } from '@haex-space/vault-sdk/vue'
const client = useHaexClient()
// Access context (theme, locale, platform)
const theme = computed(() => client.context.value?.theme ?? 'system')
// Example: Store data
async function saveNote() {
await client.storage.set('my-note', 'Hello from my extension!')
}
// Example: Read data
async function loadNote() {
const note = await client.storage.get('my-note')
console.log(note)
}
</script>
<template>
<div class="container">
<h1>My First Extension</h1>
<p>Current theme: {{ theme }}</p>
<button @click="saveNote">Save Note</button>
<button @click="loadNote">Load Note</button>
</div>
</template>
The haex init command creates your manifest.json, keypair, and icon files in the haextension folder.
Run Your Extension
Start the development server and load your extension in haex-vault:
Development Mode
# Start development server
npm run dev
Open haex-vault and load your extension from the development URL (usually http://localhost:5173).
Build for Production
# Build for production
npm run build
# Sign the extension
npx haex sign ./dist -k ./haextension/private.key
# This creates: my-extension-1.0.0.xt
Keep your private.key safe! Never commit it to version control.
Next Steps
Now that you have a working extension, explore these guides to add more functionality: