|
| 1 | +# Gun DB + Vue UI composables collection |
| 2 | + |
| 3 | +A Composition API `use` functions set for Gun.js and Vue 3 reactivity system |
| 4 | + |
| 5 | + |
| 6 | + |
| 7 | +[gun-vue.js.org](https://gun-vue.js.org) |
| 8 | + |
| 9 | +It's just the beginning and not all the functions are reliably implemented yet. So you're welcome to collaborate on existing and new features of the library. |
| 10 | + |
| 11 | +- **User** - the `gun.user()` system management |
| 12 | +- **Account** - user profile interface |
| 13 | +- **Color** - the `color-hash` interface to generate colors for hashes and pubs |
| 14 | +- **Crypto** - the main cryptographic primitives like e2e encrypted messaging and more |
| 15 | +- **Date Tree** - the very performant concept of Date Tree graphs from [gun-util](https://github.com/diatche/gun-util#DateTree) made reactive and easy to use |
| 16 | +- **File** - some bindings to manage file uploads and downloads |
| 17 | +- **Hash** - everything you need to hash data and work with the hashes in a reliable way (i.e. URL-safe conversion) |
| 18 | +- **Mouse** - some basic bindings to reliably locate mouse pointer in an SVG - may be useful for many online games |
| 19 | +- **Password** - some elaborations on reimagining password system in a p2p graph environment |
| 20 | +- **Relay** - Gun relay peer connection monitoring |
| 21 | +- **Room** - private signed collaborative spaces with a certificate system for access management. (TBD) |
| 22 | +- **Space** - a simple demo of showing working with private user data in a shared space |
| 23 | +- **Posts** - hashed immutable data in the root of the db as a fun experiment, but with deep observations about freedom of speach and ways to explore the vastness of the public graph space available with Gun |
| 24 | +- **Chat** - basic public chat |
| 25 | +- **Rooms** - cryptographic data collections |
| 26 | +- **Dictionary** - we find ourselves in great power if we have verified concepts to collaborate with |
| 27 | + |
| 28 | +... and more! |
| 29 | + |
| 30 | +**And there's more!** |
| 31 | + |
| 32 | +[READ FULL DOCUMENTATION ONLINE](https://gun-vue.js.org/docs) |
| 33 | + |
| 34 | +## How to use |
| 35 | + |
| 36 | +1. Install the library: |
| 37 | + |
| 38 | +```shell |
| 39 | +npm i @gun-vue/composables |
| 40 | +``` |
| 41 | + |
| 42 | +2. Import any of the functions you need: |
| 43 | + |
| 44 | +```js |
| 45 | +import { useAccount } from "@gun-vue/composables"; |
| 46 | +``` |
| 47 | + |
| 48 | +3. Instantiate the function inside your Vue SFC |
| 49 | + |
| 50 | +```js |
| 51 | +const { account, auth, leave } = useAccount(); |
| 52 | +``` |
| 53 | + |
| 54 | +4. Use the reactive state in your template to drive the component: |
| 55 | + |
| 56 | +```html |
| 57 | +<div v-for="(data,field) in account.profile" :key="field"> |
| 58 | + {{ field }} - {{ data }} |
| 59 | +</div> |
| 60 | +``` |
| 61 | + |
| 62 | +#### SSG environment notice (Nuxt, Vitepress etc.) |
| 63 | + |
| 64 | +Gun-Vue is client-side only and it may throw errors being executed during the SSG/SSR build process. One way to deal with it is to make the your GUN-enabled components asynchronous. |
| 65 | + |
| 66 | +### 1. Make your component async |
| 67 | + |
| 68 | +```vue |
| 69 | +<script setup async> |
| 70 | + const { useAccount } = await import("@gun-vue/composables"); |
| 71 | +
|
| 72 | + const { account } = useAccount(); |
| 73 | +</script> |
| 74 | +
|
| 75 | +<template> |
| 76 | + <div>{{ account.profile?.name }}</div> |
| 77 | +</template> |
| 78 | +``` |
| 79 | + |
| 80 | +### 2. Put it to load only on client side. |
| 81 | + |
| 82 | +```html |
| 83 | +<ClientOnly> |
| 84 | + <Suspense> |
| 85 | + <YourComponent /> |
| 86 | + </Suspense> |
| 87 | +</ClientOnly> |
| 88 | +``` |
| 89 | + |
| 90 | +This should prevent any Gun-Vue related code from running during build stage. |
| 91 | + |
| 92 | +- [ ] Refactor the code to be more useable and tree-shakeable in SSG environment. Help needed! |
| 93 | + |
| 94 | + |
0 commit comments