Installation

The shadcn-vue CLI copies pdfcn-vue source files into your repository. Start by adding the registry namespace.

Prerequisites

Toolchain

Vue 3.4+, Vite, Tailwind CSS v4, and shadcn-vue configured in your app.

Install Forme packages when the CLI asks, or add them up front: @formepdf/vue and @formepdf/core.

Register the namespace

Point @pdfcn-vue at your hosted /r directory in components.json.

components.json

{
  "registries": {
    "@pdfcn-vue": "https://pdfcn-vue.vercel.app/r/{name}.json"
  }
}

Install items

Terminal

# Theme tokens and helpers
npx shadcn-vue@latest add @pdfcn-vue/pdfcn-core

# Optional theme preset (professional is the default)
npx shadcn-vue@latest add @pdfcn-vue/theme-minimal

# Components
npx shadcn-vue@latest add @pdfcn-vue/text @pdfcn-vue/heading @pdfcn-vue/stack

# Full document (installs its dependencies)
npx shadcn-vue@latest add @pdfcn-vue/invoice-minimal

Flat namespace

Forme is the only v1 engine, so item names omit an engine segment.

Compose a document

App.vue

<script setup lang="ts">
import PdfcnThemeProvider from '@/components/pdf/PdfcnThemeProvider.vue';
import Text from '@/components/pdf/Text.vue';
import Heading from '@/components/pdf/Heading.vue';
import { Document, Page } from '@formepdf/vue';
import { minimalTheme } from '@/lib/pdfcn/themes/minimal';
</script>

<template>
  <PdfcnThemeProvider :theme="minimalTheme">
    <Document title="Hello pdfcn-vue">
      <Page :margin="56">
        <Heading :level="2">Invoice</Heading>
        <Text>Prepared for Acme Studio.</Text>
      </Page>
    </Document>
  </PdfcnThemeProvider>
</template>

Next: Theming · Components