Access async loaded component in Vue

Question

if I register a component using async loading:

components: {
    pdf: () => import('vue-pdf'),
},

How can I access pdf (and pdf's methods) in the importing component?

Unfortunately it is not possible to just import the component and use it in components later.

Could you give more context? What is the method, how is it used etc. There's likely a better way around this than accessing another component's method directly. — Dan Knights
– Dan Knights, Commented Dec 21, 2020 at 7:59
Normally you access a component's method through an instance of that component. You are trying to access the class method which will have no component this context and is probably not what you want. Please explain the details of what you are trying to do — Dan
– Dan, Commented Dec 21, 2020 at 13:15

tony19 · Accepted Answer · 2022-07-16 00:26:55Z

1

You could use a template ref on the pdf component (e.g., named myPdf), and access the vue-pdf component's methods in your script via $refs.myPdf.

This example adds a button to print the first page of the PDF:

<template>
  <div>
    <pdf ref="myPdf" src="/tracemonkey.pdf" />
    <button @click="printFirstPage">Print page 1</button>
  </div>
</template>

<script>
export default {
  components: {
    pdf: () => import('vue-pdf')
  },
  methods: {
    printFirstPage() {
      const DPI = 150
      const pages = [1]
      this.$refs.myPdf.print(dpi, pages)
    }
  }
}
</script>

edited Jul 16, 2022 at 0:26

answered Dec 22, 2020 at 22:25

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access async loaded component in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related