Gun-Vue: Composables

GitHub (@gun-vue/composables) • npm • Docs • API

Reusable logic built with the Vue 3 Composition API use functions. Manages Gun database interactions, SEA encryption, and reactive state. Check out Gun-Vue: Features (/src) for an overview.

This code is part of Gun-Vue: The Peer-to-Peer Web App Toolkit.

=======

Composables

Identity & Access

• User - the gun.user() system management
• Account - user profile interface
• Password - some elaborations on reimagining password system in a p2p graph environment

Data, Storage, & Networking

• Crypto - the main cryptographic primitives like e2e encrypted messaging and more
• Date Tree - the very performant concept of Date Tree graphs from gun-util made reactive and easy to use
• Relay - Gun relay peer connection monitoring
• File - some bindings to manage file uploads and downloads
• Hash - everything you need to hash data and work with the hashes in a reliable way (i.e. URL-safe conversion)

Content & Collaboration

• Chat - Public group chat
• Dictionary - we find ourselves in great power if we have verified concepts to collaborate with
• Private Messages - E2EE Messaging
• Posts - hashed immutable data in the root of the db as a fun experiment, but with deep observations about freedom of speech and ways to explore the vastness of the public graph space available with Gun
• Room - private signed collaborative spaces with a certificate system for access management. (TBD)
• Rooms - cryptographic data collections
• Space - An endless 2D space for the users to set their positions and draw shared pictures. Can be used to meet with people and verify their identity.

UI & Visual

• Mouse - some basic bindings to reliably locate mouse pointer in an SVG - may be useful for many online games

... and more!

How-to Use

1. Install the library:

1npm i @gun-vue/composables

2. Import any of the functions you need:

1import { useAccount } from "@gun-vue/composables";

3. Instantiate the function inside your Vue SFC

1const { account, auth, leave } = useAccount();

4. Use the reactive state in your template to drive the component:

1<div v-for="(data,field) in account.profile" :key="field">
2	{{ field }} - {{ data }}
3</div>

SSR/SSG (Nuxt, VitePress, etc.)

Gun-Vue is client-side only and may cause errors during SSR/SSG builds. To avoid issues, consider one of these approaches:

Note: We plan to refactor the code to be more usable and tree-shakeable in SSG environments. Help needed!

Approach A: Make your component async

1<script setup async>
2	const { useAccount } = await import("@gun-vue/composables");
3
4	const { account } = useAccount();
5</script>
6
7<template>
8	<div>{{ account.profile?.name }}</div>
9</template>

Approach B: Load only on the client side

1<ClientOnly>
2	<Suspense>
3		<YourComponent />
4	</Suspense>
5</ClientOnly>

This prevents Gun-Vue from running during build time.