Gun-Vue is a library of reusable components for Gun built with Vue.

Ready to use Vue 3 components as building blocks to implement Gun powered interactivity in seconds. It enables eager web developers to build p2p apps for their communities all over the world, free and open source.

Try Playground at Stackblitz.com

Native web-components may be implemented in future.

How to install?

Gun-Vue is distributed as a regular NPM package and may be used in any Vue 3 project.

0. You may start by creating a new Vue project or skip this step if you already have one.

pnpm init vue@latest
cd <your-project-name>
pnpm install
pnpm run dev

1. Install the @gun-vue/components package and start the development process

pnpm i @gun-vue/components
pnpm run dev

2. You can use the components in any place of your app

<script setup>
	import "@gun-vue/components/dist/style.css";
	import { UserHome } from "@gun-vue/components";
</script>

<template>
	<div>
		<UserHome></UserHome>
	</div>
</template>

3. OR you can install the Gun-Vue plugin and it's styles in your app main.js file and use all the components straight away.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import "./assets/main.css";
import "@gun-vue/components/style.css";
import { GunVuePlugin } from "@gun-vue/components";

const app = createApp(App);
app.use(router);
app.use(GunVuePlugin);
app.mount("#app");

So you can use any of the Gun-Vue components in any SFC in your app.

<template>
	<ChatRoom />
</template>

SSR environment

Most of the Gun-Vue components rely on realtime communication with the GUN database. This means we should prevent them from running during the build process to be executed only on the client. Please use <ClientOnly> and Suspense with async components to have client-side components in a server side render environment.

We use Vitepress as our Static Site Generator and there's a plenty of documented ways how to prevent GUN running during SSR.

A. Define your component as a client-side

<script setup>
import { defineClientComponent } from 'vitepress'

const ClientComp = defineClientComponent(() => {
  return import('ClientComp.vue')
})
</script>

<template>
  <ClientComp />
</template>

B. Conditionally import and add your component to the app

// .vitepress/theme/index.js
export default {
  // ...
  async enhanceApp({ app }) {
    if (!import.meta.env.SSR) {
      app.component('YourComponent', await import('./YourComponent.vue'))
    }
  }
}