Insightcn

Vue

Use Insightcn in Vue applications.

Setup

Install insightcn:

npm install insightcn

Usage

<script setup>
import { captureRegistryEvent } from "@insightcn/sdk";

const handleInstall = async () => {
  const request = new Request("https://your-registry.com/r/ui/button.json", {
    method: "GET",
    headers: { "user-agent": "node-fetch" },
  });

  await captureRegistryEvent(request, "your-api-key", "installed");
};
</script>

<template>
  <button @click="handleInstall">Install Button</button>
</template>

Composable

You can create a composable for reusable tracking:

// composables/useRegistryTracker.ts
import { captureRegistryEvent, generateRegistryRssFeed } from "@insightcn/sdk";

export function useRegistryTracker(apiKey: string) {
  const trackEvent = async (
    registryUrl: string,
    type: "installed" | "viewed" | "downloaded" = "installed"
  ) => {
    const request = new Request(registryUrl, {
      method: "GET",
      headers: { "user-agent": "node-fetch" },
    });

    await captureRegistryEvent(request, apiKey, type);
  };

  const generateRss = async (
    options: Parameters<typeof generateRegistryRssFeed>[0]
  ) => {
    return generateRegistryRssFeed(options);
  };

  return { trackEvent, generateRss };
}

Usage in Component

<script setup>
import { useRegistryTracker } from "@/composables/useRegistryTracker";

const { trackEvent, generateRss } = useRegistryTracker("your-api-key");

const handleInstall = async () => {
  await trackEvent("https://your-registry.com/r/ui/button.json");
};

const handleGenerateRss = async () => {
  const rss = await generateRss({
    baseUrl: "https://your-registry.com",
    rss: {
      title: "My Shadcn Registry",
      description: "Custom components for shadcn/ui",
    },
  });

  console.log(rss);
};
</script>

<template>
  <button @click="handleInstall">Install Button</button>
  <button @click="handleGenerateRss">Generate RSS</button>
</template>

On this page