The component is not responsive

[gradox2020]

The component is not responsive

[FossPrime]

I think a default component level solution should be used... like vue-pdf used to do. Without it the advanced example looks broken.

Here's my solution:

// import debounce to prevent performance issues while resizing window
import { debounce } from 'lodash-es'

// in data or a ref
resizeObserver: null

// in `loaded` event handler
      this.resizeObserver.observe(this.$refs.pdfRef.$el.parentElement)


// in `created` vue lifecycle hook
      const rOSM = {
        prevWidth: '', // using width prevents blinking while rendering happens which can change the height
        pdfRef: this.$refs.pdfRef
      }
      this.resizeObserver = new ResizeObserver(
        debounce((entries) => {
          const entry = entries[0]
          const newWidth = entry.contentRect.width
          const prevWidth = rOSM.prevWidth
          rOSM.prevWidth = newWidth
          if (prevWidth !== '' && prevWidth !== newWidth) {
            console.log(prevWidth, newWidth)
            rOSM.pdfRef.render()
          }
        }, 300)

// on `beforeDestroy` vue lifecycle hook
this.resizeObserver.unobserve(this.$refs.pdfRef.$el)

[hrynko]

Hi @gradox2020,

It isn't planned to make it responsive. It is recommended to use one of the following approaches:

• Some of the resize tracking libs for Vue
• Resize Observer API or resize event
• CSS approach from #20 (if you don't need annotation and text layers)

Responsiveness out of the box is not added due to the fact that this is a rather case-specific topic. It is assumed that the developer will be able to choose the most appropriate approach, and not be limited to a hardwired solution. Thank you for your understanding, I hope this doesn't spoil your experience of using the library.