PDFs,
built
with Vue.
Write a Vue component.
Get a PDF from it.
Install document components as source files. Fill them with your data, render with Forme, and edit the result in your own project.
Independent design studioSAMPLE INVOICE
№ 2026—042
Good work.
On paper.
PAIDNorthstar Studio
48 Design AvenuePortland, OR 97205
September 01, 2026
DUE DATESeptember 30, 2026
Thank you for trusting us with your next chapter.
Here's to making something that matters.
The source and
the PDF.
Pick a template to inspect its Vue source and rendered PDF. The examples use sample data.
Start with a part
or a whole document.
Registry installs place the Vue files in your project. You can edit them there.
Assemble a document.
Add headings, tables, charts, headers, and footers. Each component has typed props and a reference page.
Use a complete template.
Install an invoice, report, shipping label, or agenda with its sample data. Then replace the data and edit the Vue file.
Set the type,
color, and spacing.
Choose one of nine presets, adjust its tokens against a live PDF, and export the theme as TypeScript.
Open the theme builder Install, edit,
render.
Read the installation guideInstall a component.
Add the registry to components.json. The shadcn-vue CLI brings in the component and its dependencies.
Pass your data.
The CLI writes a Vue file into your project. Bind your data and edit the markup or theme as needed.
Render the PDF.
Render with Forme in the browser or on your server. Download a PDF or return it from a Nuxt endpoint.
Terminal / After registry setup
npx shadcn-vue@latest add @pdfcn-vue/invoice-minimal