Gun-Vue: Components

GitHub (@gun-vue/components) • npm • Docs

Vue 3 Single-File Components (SFC) providing ready-to-use UI powered by UnoCSS, Pug templates, and your feature’s composables.

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

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.

1pnpm init vue@latest
2cd <your-project-name>
3pnpm install
4pnpm run dev

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

1pnpm i @gun-vue/components
2pnpm run dev

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

1<script setup>
2	import "@gun-vue/components/dist/style.css";
3	import { UserHome } from "@gun-vue/components";
4</script>
5
6<template>
7	<div>
8		<UserHome></UserHome>
9	</div>
10</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.

1import { createApp } from "vue";
2import App from "./App.vue";
3import router from "./router";
4
5import "./assets/main.css";
6import "@gun-vue/components/style.css";
7import { GunVuePlugin } from "@gun-vue/components";
8
9const app = createApp(App);
10app.use(router);
11app.use(GunVuePlugin);
12app.mount("#app");

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

1<template>
2	<ChatRoom />
3</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 client-only and Suspense with async components to have client-side components in a server side render environment.

1<script setup async>
2	import "@gun-vue/components/dist/style.css";
3	const { UserHome } = await import("@gun-vue/components");
4</script>
5
6<template>
7	<div>
8		<UserHome></UserHome>
9	</div>
10</template>

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