Nuxt
Use Insightcn in Nuxt applications.
Setup
Install insightcn:
npm install insightcnComposable
// composables/useRegistryTracker.ts
import { captureRegistryEvent, generateRegistryRssFeed } from "@insightcn/sdk";
export const useRegistryTracker = () => {
const config = useRuntimeConfig();
const trackInstall = async (registryUrl: string) => {
const request = new Request(registryUrl, {
method: "GET",
headers: { "user-agent": "node-fetch" },
});
await captureRegistryEvent(request, config.public.insightcnApiKey);
};
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, config.public.insightcnApiKey, type);
};
const generateRss = async (
options: Parameters<typeof generateRegistryRssFeed>[0]
) => {
return generateRegistryRssFeed(options);
};
return { trackEvent, trackInstall, generateRss };
};Usage in Component
<script setup>
import { useRegistryTracker } from "~/composables/useRegistryTracker";
const { trackEvent, generateRss } = useRegistryTracker();
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>Server API Route
// server/api/registry/[...slug].ts
import { captureRegistryEvent } from "@insightcn/sdk";
export default defineEventHandler(async (event) => {
const slug = getRouterParam(event, "slug");
const registryUrl = `https://your-registry.com/r/${slug}.json`;
const registryResponse = await fetch(registryUrl);
const data = await registryResponse.json();
await captureRegistryEvent(
event.node.req as unknown as Request,
useRuntimeConfig().public.insightcnApiKey
);
return data;
});Environment Configuration
export default defineConfig({
runtimeConfig: {
public: {
insightcnApiKey: process.env.INSIGHTCN_API_KEY,
},
},
});