Vue
Use Insightcn in Vue applications.
Setup
Install insightcn:
npm install insightcnUsage
<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>