Resizing with reload method not working

[JSantangelo-Octopus]

I think this is not a package issue, but i not find the way to reload and resize when the screen width changes. Im trying to use "fit-parent : true" and "reload"**, to be triggered on specific breakpoints.

**If ref VPDF has no explicit type, i get a typescript error "Property 'reload' does not exist on type '{}'". I think maybe "reload" event is not being triggered.

stack:

vue : 3.4.5 vue-pdf : 1.9.3 vite 5.0.11

template

  <div
    class="relative flex w-full items-center rounded-lg border-2 border-gray-400 bg-white md:max-h-[35rem]"
  >
    <VuePDF class="z-20 w-full rounded-lg" :pdf="pdf.value" :fit-parent="true" ref="VPDF" />
    <div class="absolute inset-0 z-10 flex items-center justify-center rounded-lg">
      Cargando...
    </div>

    <button
      @click="showModal = true"
      id="openModal"
      class="group/zoom absolute inset-0 z-30 flex w-full items-center justify-center bg-gray-300/0 transition-all hover:bg-gray-300/30"
    >
      <MagnifyingGlassCircleIcon
        class="pointer-events-none h-12 w-12 stroke-gray-600 text-transparent opacity-0 group-hover/zoom:opacity-100"
        id="test2"
      />
    </button>
  </div>

script

import { usePDF, VuePDF } from '@tato30/vue-pdf'
const VPDF = ref<any>({})
onMounted(() => {
  const medium = window.matchMedia('(min-width: 768px) and (max-width: 1023px)')
  const large = window.matchMedia('(min-width: 1024px) and (max-width: 1279px)')
  const Xlarge = window.matchMedia('(min-width: 1280px) and (max-width: 1535px)')
  const XXlarge = window.matchMedia('(min-width: 1536px)')

  medium.addEventListener('change', () => {
    console.log('medium!!')
    reloadPDF()
  })
  large.addEventListener('change', () => {
    console.log('large!!')
    reloadPDF()
  })
  Xlarge.addEventListener('change', () => {
    console.log('xlarge!!')
    reloadPDF()
  })
  XXlarge.addEventListener('change', () => {
    console.log('xxlarge!!')
    reloadPDF()
  })

  reloadPDF()
})

const reloadPDF = () => {
  console.log('reload')

  VPDF.value.reload()
}

const pdf = computed(() => {
    return usePDF(props.file.path).pdf
})     

[TaTo30]

Try to use width prop instead of fit-parent

[JSantangelo-Octopus]

Yup, that works! Using a ref in width prop and updating the value using the eventListeners changes the size correctly

template

  <div
    class="relative flex h-fit w-fit items-center rounded-lg border-2 border-gray-400 bg-white"
  >
    <VuePDF class="z-20 w-full rounded-lg" :pdf="pdfProp" :width="pdfWidth" ref="VPDF" />
    <div class="absolute inset-0 z-10 flex items-center justify-center rounded-lg">
      Cargando...
    </div>

    <button
      @click="showModal = true"
      id="openModal"
      class="group/zoom absolute inset-0 z-30 flex w-full items-center justify-center bg-gray-300/0 transition-all hover:bg-gray-300/30"
    >
      <MagnifyingGlassCircleIcon
        class="pointer-events-none h-12 w-12 stroke-gray-600 text-transparent opacity-0 group-hover/zoom:opacity-100"
        id="test2"
      />
    </button>
  </div>

script

const pdfWidth = ref<number>(400)
onMounted(() => {
  fields.amount.initial = computedFile.value.importe

  const medium = window.matchMedia('(min-width: 768px) and (max-width: 1023px)')
  const large = window.matchMedia('(min-width: 1024px) and (max-width: 1279px)')
  const Xlarge = window.matchMedia('(min-width: 1280px) and (max-width: 1535px)')
  const XXlarge = window.matchMedia('(min-width: 1536px)')

  medium.addEventListener('change', () => {
    console.log('medium!!')
    pdfWidth.value = 600
  })
  large.addEventListener('change', () => {
    console.log('large!!')
    pdfWidth.value = 250
  })
  Xlarge.addEventListener('change', () => {
    console.log('xlarge!!')
    pdfWidth.value = 350
  })
  XXlarge.addEventListener('change', () => {
    console.log('xxlarge!!')
    pdfWidth.value = 410
  })
})

template changes:

• Parent div: uses w-fit and h-fit classes - VuePDF element will decide the size-
• VuePDF : dynamic value 'pdfWidth' on width prop

script changes:

• new ref pdfWidth
• eventListeners doesnt call reloadPDF. Instead updates pdfWidth value

[TaTo30]

**If ref VPDF has no explicit type, i get a typescript error "Property 'reload' does not exist on type '{}'"

Use this statement to get the VuePDF type: const VPDF = ref<InstanceType<typeof VuePDF>>()