Inline Citation

Installation

Complete project setup with vue/reka, then install these components:

pnpm exec frontfriend download popover button -f vue --primitive reka

Press Enter or Space to open the source card. Its link is in the keyboard focus order. Escape closes the card and returns focus to its button. In an AI SDK adapter, use source-url parts, a stable sourceId, and the source title. Validate external source URLs before creating links.

Usage

Complete example

<script setup lang="ts">
import { computed } from "vue";
import { Popover } from "@/components/ui/popover";
import { PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { PopoverContent } from "@/components/ui/popover";

const args = {
  "title": "Frontfriend documentation",
};
const sources = computed(() => [
  {
    id: "docs",
    url: "https://frontfriend.dev/docs/",
    title: args.title,
    description: "Install components and connect your Design System.",
    text: "Frontfriend components use the tokens from your Design System.",
  },
  {
    id: "theme",
    url: "https://www.w3.org/WAI/ARIA/apg/",
    title: "Accessible interaction patterns",
    description: "Use standard keyboard behavior and accessible names.",
    text: "Consistent keyboard behavior helps people use the application.",
  },
]);
function hostname(url: string) {
  return new URL(url).hostname;
}
</script>

<template>
  <div
    style="
      width: 100%;
      max-width: 560px;
      min-width: 0;
      margin-inline: auto;
      display: grid;
      gap: 16px;
      padding-block: 16px;
      font-size: var(--text-sm);
      line-height: 1.5;
    "
  >
    <div v-for="source in sources" :key="source.id" style="line-height: 1.8">
      {{ source.text }}
      <Popover
        ><PopoverTrigger as-child
          ><Button
            variant="secondary"
            size="xs"
            :aria-label="hostname(source.url) + ': ' + source.title"
            >{{ hostname(source.url) }}</Button
          ></PopoverTrigger
        >
        <PopoverContent :aria-label="source.title"
          ><div style="display: grid; gap: 8px">
            <strong>{{ source.title }}</strong>
            <p>{{ source.description }}</p>
            <Button variant="link" as-child style="justify-self: start"
              ><a :href="source.url" target="_blank" rel="noreferrer"
                >Read source (opens in a new tab)</a
              ></Button
            >
          </div></PopoverContent
        >
      </Popover>
    </div>
  </div>
</template>

Components and API

This composition has no separate component API. Use the APIs for its installed components.