npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gun-vue/composables

v0.21.4

Published

A Composition API `use` functions set for Gun.js and Vue 3 reactivity system

Downloads

159

Readme

Gun DB + Vue UI composables collection

A Composition API use functions set for Gun.js and Vue 3 reactivity system

@gun-vue composables logo

gun-vue.js.org

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.

  • User - the gun.user() system management
  • Account - user profile interface
  • Color - the color-hash interface to generate colors for hashes and pubs
  • 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
  • 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)
  • Mouse - some basic bindings to reliably locate mouse pointer in an SVG - may be useful for many online games
  • Password - some elaborations on reimagining password system in a p2p graph environment
  • Relay - Gun relay peer connection monitoring
  • Room - private signed collaborative spaces with a certificate system for access management. (TBD)
  • Space - a simple demo of showing working with private user data in a shared space
  • 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
  • Chat - basic public chat
  • Rooms - cryptographic data collections
  • Dictionary - we find ourselves in great power if we have verified concepts to collaborate with

... and more!

And there's more!

READ FULL DOCUMENTATION ONLINE

How to use

  1. Install the library:
npm i @gun-vue/composables
  1. Import any of the functions you need:
import { useAccount } from "@gun-vue/composables";
  1. Instantiate the function inside your Vue SFC
const { account, auth, leave } = useAccount();
  1. Use the reactive state in your template to drive the component:
<div v-for="(data,field) in account.profile" :key="field">
	{{ field }} - {{ data }}
</div>

SSG environment notice (Nuxt, Vitepress etc.)

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.

1. Make your component async

<script setup async>
	const { useAccount } = await import("@gun-vue/composables");

	const { account } = useAccount();
</script>

<template>
	<div>{{ account.profile?.name }}</div>
</template>

2. Put it to load only on client side.

<ClientOnly>
	<Suspense>
		<YourComponent />
	</Suspense>
</ClientOnly>

This should prevent any Gun-Vue related code from running during build stage.

  • [ ] Refactor the code to be more useable and tree-shakeable in SSG environment. Help needed!