Insightcn

Nuxt

Use Insightcn in Nuxt applications.

Setup

Install insightcn:

npm install insightcn

Composable

// 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

nuxt.config.ts
export default defineConfig({
  runtimeConfig: {
    public: {
      insightcnApiKey: process.env.INSIGHTCN_API_KEY,
    },
  },
});

On this page