Customizing Component

How to change loader progress

Method 1: Override the loader image and/or the progress percentage

<template>
    <VPdfViewer src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
    <template #loaderImage>
        <!-- you can use image or svg tag -->
        <svg width="40px" height="40px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
            <path
            fill="white"
            stroke="white"
            stroke-width="15"
            transform-origin="center"
            d="m148 84.7 13.8-8-10-17.3-13.8 8a50 50 0 0 0-27.4-15.9v-16h-20v16A50 50 0 0 0 63 67.4l-13.8-8-10 17.3 13.8 8a50 50 0 0 0 0 31.7l-13.8 8 10 17.3 13.8-8a50 50 0 0 0 27.5 15.9v16h20v-16a50 50 0 0 0 27.4-15.9l13.8 8 10-17.3-13.8-8a50 50 0 0 0 0-31.7Zm-47.5 50.8a35 35 0 1 1 0-70 35 35 0 0 1 0 70Z"
            ></path>
        </svg>
    </template>
    <template #loaderProgress="{ progress }">
        <div style="color: white">
        {{ progress }} % loading
        </div>
    </template>
    </VPdfViewer>
</template>

<style scoped>
/* to replace the default mask color */
:deep(.vpv-variable) {
    --vpv-loader-backdrop-color: #7862ff;
    /* if you want to change the animation, you may set the name of "--vpv-loader-animation-name" css variable */
}
:deep(.vpv-variable.vpv-container__dark) {
    --vpv-loader-backdrop-color: white;
}
</style>

Method 2: Customize all elements of the progress loader

<template>
    <VPdfViewer src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
    <template #loader="{ loaded, progress }">
        <div v-if="!loaded" class="wrapper">
        {{ progress }}%
        </div>
    </template>
</VPdfViewer>
</template>
<style scoped>
    .wrapper {
    inset: 0;
    position: absolute;
    background: white;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    }
</style>

How to add a custom language

If you wish to add a custom language, please do so by using the locale and localization props in the component:

<VPdfViewer locale="customLang" :localization="{ customLang: { .... } }" />

It's important to note that the locale string must match the key in the localization object. Otherwise, it will fall back to en_US.