Rotate Plugin

The Rotate Plugin allows you to change the orientation of the entire document. It applies a rotation to every page, letting users view content in 90-degree increments.

Installation

This plugin is available as a separate NPM package.

npm install @embedpdf/plugin-rotate

pnpm add @embedpdf/plugin-rotate

yarn add @embedpdf/plugin-rotate

bun add @embedpdf/plugin-rotate

Registration

Import RotatePluginPackage and add it to the plugins array. You can also specify a default rotation to apply when a document is first loaded.

import { createPluginRegistration } from '@embedpdf/core'
import { Rotation } from '@embedpdf/models'
import { RotatePluginPackage } from '@embedpdf/plugin-rotate/vue'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, {
    /* ... */
  }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Register and configure the rotate plugin
  createPluginRegistration(RotatePluginPackage, {
    defaultRotation: Rotation.Degree90, // Start documents rotated 90° clockwise
  }),
]
 
// ... rest of your component

Usage

The plugin provides the useRotate composable to control the rotation from your UI and a <Rotate /> component to apply the visual transformation to each page.

Building a Rotate Toolbar

Use the useRotate composable to get the current rotation state and the provides object, which contains methods to change it. The rotation state is a reactive ref containing a number from the Rotation enum (0 = 0°, 1 = 90°, 2 = 180°, 3 = 270°).

<script setup lang="ts">
import { useRotate } from '@embedpdf/plugin-rotate/vue'
 
const { rotation, provides: rotate } = useRotate();
</script>
 
<template>
  <div v-if="rotate" class="toolbar">
    <span>Current Rotation: {{ rotation * 90 }}°</span>
    <button @click="rotate.rotateBackward">Rotate Left</button>
    <button @click="rotate.rotateForward">Rotate Right</button>
  </div>
</template>

Applying the Rotation

For the rotation to be visible, you must wrap your page layers with the <Rotate /> component inside the <Scroller>’s default slot. This component calculates and applies the necessary CSS transform. It’s important to place it outside the PagePointerProvider to ensure interactions are correctly mapped to the rotated page.

// Inside your main PDFViewer component
<template>
  <Scroller>
    <template #default="{ page }">
      <Rotate :page-size="{ width: page.width, height: page.height }">
        <PagePointerProvider
          :page-index="page.pageIndex"
          :page-width="page.width"
          :page-height="page.height"
        >
          <RenderLayer :page-index="page.pageIndex" :scale="page.scale" />
        </PagePointerProvider>
      </Rotate>
    </template>
  </Scroller>
</template>

Live Example

This is a complete viewer that uses a rotate toolbar and correctly applies the <Rotate /> component to each page.

API Reference

Configuration (RotatePluginConfig)

Composable: useRotate()

Connects your component to the rotate plugin’s state and functions.

Returns

RotateCapability Methods

Component: <Rotate />

A wrapper component that applies the correct CSS rotation transform to its children.

Props