Headless PDF Components for Vue

EmbedPDF for Vue is a headless UI toolkit for building powerful, fully-customized PDF viewing and editing experiences in Vue 3.

Unlike traditional PDF libraries that provide a monolithic, pre-styled <PDFViewer> component, EmbedPDF gives you a set of unopinionated composables and components. This gives you complete control over your application’s layout, styling, and functionality.

Think of it like this: instead of a pre-built car, we give you a high-performance engine (@embedpdf/engines), a chassis (<EmbedPDF>), and a set of quality parts (plugins, composables, and components) that you assemble to build the exact vehicle you need.

What Does “Headless” Mean?

1. You Control the UI: We provide the logic, you provide the pixels. The library does not ship with any CSS or pre-built toolbars. You can use any styling solution you prefer, from scoped CSS in your SFCs to component frameworks like Vuetify or utility-class frameworks like Tailwind CSS.

2. Composable by Design: You build your viewer by composing components and slots. Need a render layer? Add the <RenderLayer /> component. Want a search UI? Use the useSearch composable and build the interface you want. This keeps your component tree clean and your bundle size minimal.

3. Total Layout Freedom: Our components are simple building blocks designed to fit inside your application’s layout, not the other way around. You decide where the viewport goes, where the sidebar lives, and how the toolbar is structured.

The Core Building Blocks

Your entire PDF experience is built from a few key concepts:

• <EmbedPDF> Component: The root provider that manages the core engine and orchestrates all the plugins.
• Plugins: These are the “brains” of your viewer, adding features like zooming, scrolling, searching, and more.
• Composables: Functions like useZoom() or useScroll() that allow your components to read and react to the state of the PDF viewer.
• Components: Unstyled, functional components like <RenderLayer /> and <Scroller /> that handle the actual rendering and interaction within the DOM, often using scoped slots.

Ready to get started? Let’s build your first viewer!