VUE PDF VIEWER

Appearance

Configure Annotation Tools ​

You can customize the appearance and behavior of annotation tools by passing additional options to the VPdfAnnotationPlugin function.

Show/Hide Annotation Tools ​

You can enable or disable each annotation tool based on what you want your users to access. By default, all annotation tools are enabled and visible.

Disable All Text Selection Tools ​

To disable all text selection tools (Highlight, Underline, Strikethrough), set textSelection to false:

vue
<script setup lang="ts">
  import { VPdfViewer } from "@vue-pdf-viewer/viewer";
  import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

  // Custom configuration
  const annotationPlugin = VPdfAnnotationPlugin({
    textSelection: false, // Disable all text selection tools
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
  import { VPdfViewer } from "@vue-pdf-viewer/viewer";
  import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

  // Custom configuration
  const annotationPlugin = VPdfAnnotationPlugin({
    textSelection: false, // Disable all text selection tools
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      textSelection: false // Disable all text selection tools
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      textSelection: false // Disable all text selection tools
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Disable Individual Text Selection Tools v1.3.0 ​

To disable specific text selection tools while keeping others enabled:

vue
<script setup lang="ts">
  import { VPdfViewer } from "@vue-pdf-viewer/viewer";
  import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

  // Custom configuration
  const annotationPlugin = VPdfAnnotationPlugin({
    textSelection: {
      highlight: true,       // Enable highlight
      underline: true,       // Enable underline
      strikethrough: false,  // Disable strikethrough only
    },
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
  import { VPdfViewer } from "@vue-pdf-viewer/viewer";
  import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

  // Custom configuration
  const annotationPlugin = VPdfAnnotationPlugin({
    textSelection: {
      highlight: true,       // Enable highlight
      underline: true,       // Enable underline
      strikethrough: false,  // Disable strikethrough only
    },
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      textSelection: {
        highlight: true,       // Enable highlight
        underline: true,       // Enable underline
        strikethrough: false,  // Disable strikethrough only
      },
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      textSelection: {
        highlight: true,       // Enable highlight
        underline: true,       // Enable underline
        strikethrough: false,  // Disable strikethrough only
      },
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Configure with Custom Icons ​

If you want to replace the default highlight icon in the toolbar, you can easily provide your own custom icons for annotation tools.

For example, create a custom highlight icon component:

./components/IconHighlight.vue

vue
<template>
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</template>

Then, use it in your configuration as shown below:

vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import IconHighlight from "./components/IconHighlight.vue";

const annotationPlugin = VPdfAnnotationPlugin({
  highlight: { 
    // Use a custom icon component for the highlight tool
    icon: IconHighlight, 
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import IconHighlight from "./components/IconHighlight.vue";

const annotationPlugin = VPdfAnnotationPlugin({
  highlight: { 
    // Use a custom icon component for the highlight tool
    icon: IconHighlight, 
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';
import IconHighlight from './components/IconHighlight.vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      // Use a custom icon component for the highlight tool
      highlight: {
          icon: IconHighlight
      }
    });
    return { annotationPlugin }
}
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';
import IconHighlight from './components/IconHighlight.vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      // Use a custom icon component for the highlight tool
      highlight: {
          icon: IconHighlight
      }
    });
    return { annotationPlugin }
}
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>

Configure Text Selection Tools v1.3.0 ​

The textSelection option allows you to configure Highlight, Underline, and Strikethrough tools together. Each tool type has its own color palette — highlight uses a light/pastel palette by default, while underline and strikethrough use a deep/saturated palette.

Configure Per-Type Colors ​

Set a custom color palette for each text selection tool individually:

vue
<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration with per-type colors
const annotationPlugin = VPdfAnnotationPlugin({
  textSelection: {
    highlight: {
      colors: [
        { label: 'Red', value: '#FFACAC' },
        { label: 'Yellow', value: '#FCE244' },
        { label: 'Green', value: '#A0F751' },
        { label: 'Blue', value: '#65EDE9' },
        { label: 'Purple', value: '#CAAAFF' },
        { label: 'Orange', value: '#FFBD82' },
      ],
    },
    underline: {
      colors: [
        { label: 'Purple', value: '#7862FF' },
        { label: 'Blue', value: '#1777FF' },
        { label: 'Red', value: '#F66365' },
        { label: 'Orange', value: '#FF8329' },
        { label: 'Yellow', value: '#FFD234' },
        { label: 'Green', value: '#49D86E' },
      ],
    },
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration with per-type colors
const annotationPlugin = VPdfAnnotationPlugin({
  textSelection: {
    highlight: {
      colors: [
        { label: 'Red', value: '#FFACAC' },
        { label: 'Yellow', value: '#FCE244' },
        { label: 'Green', value: '#A0F751' },
        { label: 'Blue', value: '#65EDE9' },
        { label: 'Purple', value: '#CAAAFF' },
        { label: 'Orange', value: '#FFBD82' },
      ],
    },
    underline: {
      colors: [
        { label: 'Purple', value: '#7862FF' },
        { label: 'Blue', value: '#1777FF' },
        { label: 'Red', value: '#F66365' },
        { label: 'Orange', value: '#FF8329' },
        { label: 'Yellow', value: '#FFD234' },
        { label: 'Green', value: '#49D86E' },
      ],
    },
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration with per-type colors
    const annotationPlugin = VPdfAnnotationPlugin({
      textSelection: {
        highlight: {
          colors: [
            { label: 'Red', value: '#FFACAC' },
            { label: 'Yellow', value: '#FCE244' },
            { label: 'Green', value: '#A0F751' },
            { label: 'Blue', value: '#65EDE9' },
            { label: 'Purple', value: '#CAAAFF' },
            { label: 'Orange', value: '#FFBD82' },
          ],
        },
        underline: {
          colors: [
            { label: 'Purple', value: '#7862FF' },
            { label: 'Blue', value: '#1777FF' },
            { label: 'Red', value: '#F66365' },
            { label: 'Orange', value: '#FF8329' },
            { label: 'Yellow', value: '#FFD234' },
            { label: 'Green', value: '#49D86E' },
          ],
        },
      },
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration with per-type colors
    const annotationPlugin = VPdfAnnotationPlugin({
      textSelection: {
        highlight: {
          colors: [
            { label: 'Red', value: '#FFACAC' },
            { label: 'Yellow', value: '#FCE244' },
            { label: 'Green', value: '#A0F751' },
            { label: 'Blue', value: '#65EDE9' },
            { label: 'Purple', value: '#CAAAFF' },
            { label: 'Orange', value: '#FFBD82' },
          ],
        },
        underline: {
          colors: [
            { label: 'Purple', value: '#7862FF' },
            { label: 'Blue', value: '#1777FF' },
            { label: 'Red', value: '#F66365' },
            { label: 'Orange', value: '#FF8329' },
            { label: 'Yellow', value: '#FFD234' },
            { label: 'Green', value: '#49D86E' },
          ],
        },
      },
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Configure Custom Icons for Text Selection Tools v1.3.0 ​

You can customize the icons for individual text selection tools:

vue
<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import CustomHighlightIcon from './components/CustomHighlightIcon.vue'
import CustomUnderlineIcon from './components/CustomUnderlineIcon.vue'

// Custom configuration with custom icons
const annotationPlugin = VPdfAnnotationPlugin({
  textSelection: {
    highlight: {
      icon: CustomHighlightIcon,
    },
    underline: {
      icon: CustomUnderlineIcon,
    },
    strikethrough: true, // Use default icon
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import CustomHighlightIcon from './components/CustomHighlightIcon.vue'
import CustomUnderlineIcon from './components/CustomUnderlineIcon.vue'

// Custom configuration with custom icons
const annotationPlugin = VPdfAnnotationPlugin({
  textSelection: {
    highlight: {
      icon: CustomHighlightIcon,
    },
    underline: {
      icon: CustomUnderlineIcon,
    },
    strikethrough: true, // Use default icon
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';
import CustomHighlightIcon from './components/CustomHighlightIcon.vue'
import CustomUnderlineIcon from './components/CustomUnderlineIcon.vue'

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration with custom icons
    const annotationPlugin = VPdfAnnotationPlugin({
      textSelection: {
        highlight: {
          icon: CustomHighlightIcon,
        },
        underline: {
          icon: CustomUnderlineIcon,
        },
        strikethrough: true, // Use default icon
      },
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';
import CustomHighlightIcon from './components/CustomHighlightIcon.vue'
import CustomUnderlineIcon from './components/CustomUnderlineIcon.vue'

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration with custom icons
    const annotationPlugin = VPdfAnnotationPlugin({
      textSelection: {
        highlight: {
          icon: CustomHighlightIcon,
        },
        underline: {
          icon: CustomUnderlineIcon,
        },
        strikethrough: true, // Use default icon
      },
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Configure Free Text Tool ​

Configure Font Color ​

Currently, the Free Text tool has a color palette of 12 default colors. Here is how you can change the font color.

vue
<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
    freeText: {
      fontColors: [
        {label: 'Red', value: 'red'}, 
        {label: 'Green', value: '#007700'}, // hex color 
        {label: 'Yellow', value: '#ffff0090'} // hex color with opacity
      ] 
    }
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
    freeText: {
      fontColors: [
        {label: 'Red', value: 'red'}, 
        {label: 'Green', value: '#007700'}, // hex color 
        {label: 'Yellow', value: '#ffff0090'} // hex color with opacity
      ] 
    }
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
      fontColors: [ 
        {label: 'Red', value: 'red'}, 
        {label: 'Green', value: '#007700'}, // hex color 
        {label: 'Yellow', value: '#ffff0090'} // hex color with opacity
      ]
    }
  });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
      fontColors: [ 
        {label: 'Red', value: 'red'}, 
        {label: 'Green', value: '#007700'}, // hex color 
        {label: 'Yellow', value: '#ffff0090'} // hex color with opacity
      ]
    }
  });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>

Configure Font Size ​

For the Free Text tool, you can change or add font size depending on your preference.

vue
<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
    freeText: {
      fontSizes: [ 12, 14, 16 ] 
    }
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
    freeText: {
      fontSizes: [ 12, 14, 16 ] 
    }
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        fontSizes: [ 12, 14, 16 ] 
      }
    });
  });
    return {
      annotationPlugin
    }
	}
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        fontSizes: [ 12, 14, 16 ] 
      }
    });
  });
    return {
      annotationPlugin
    }
	}
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>