DSCVR Canvas · Vue store + Nuxt module

Your Nuxt app, inside a DSCVR post.

Add the module and call useCanvas(). It does the host handshake and hands you the user, the post and an SDK client. Below, the real module runs in a frame against a simulated host, so you can watch every message.

pnpm add @vinayakkulkarni/canvas-module

Host simulator

host sends user

ada linus anonymous

dscvr · portal/vue · post-1729240px

the wire · 0 messages

Nothing yet. Reload the frame to replay the handshake.

↑ canvas to host, ↓ host to canvas. The host here answers the handshake, resize, open-link and copy requests. Wallet and post requests need the real DSCVR host.

Two packages

canvas-module for Nuxt wraps canvas-store, which works in any Vue 3 app.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vinayakkulkarni/canvas-module'],
});

<script setup lang="ts">
const { client, user, content, isReady } = useCanvas();

function openProfile() {
  client.value?.openLink(`https://dscvr.one/u/${user.value?.username}`);
}
</script>

import { createCanvasStore } from '@vinayakkulkarni/canvas-store';

const canvas = createCanvasStore();
await canvas.initializeCanvas(); // settles at once outside a host frame
canvas.user.value; // { id, username, avatar? } | null

The store

useCanvas() and createCanvasStore() return the same object.

client

The SDK client once the host answered.

Ref<CanvasClient | null>

user

The DSCVR user viewing the post, if any.

Ref<User | null>

content

The post and portal the canvas lives in.

Ref<Content | null>

isReady

True once the handshake settled, host or not.

Ref<boolean>

initializeCanvas()

Handshake with the host. Idempotent.

Promise<void>

cleanupCanvas()

Destroy the client and reset the state.

void