CODEWITHSUNDEEP
javascriptvue.jsprintingvuejs3
AndreasInfo
AndreasInfo

Reputation: 1227

vue-html-to-paper with Vue3

I'd like to try out vue-html-to-paper and I did the simplest setup according to the documentation. I am using Vue3 though.

npm install vue-html-to-paper

//main.js
[...]
import VueHtmlToPaper from "vue-html-to-paper";

createApp(App)
  .use(VueHtmlToPaper)
  .mount("#app");

And my component:

<template>
  <div>
    <div id="example">
      Hello World
    </div>

    <button @click="print">
      Print
    </button>
  </div>
</template>

<script>
export default {
  name: "my_component",

  methods: {
    print: function() {
      this.$htmlToPaper("example");
    },
  },
</script>
[...]

On dev I get an error in console [...] Cannot set property '$htmlToPaper' of undefined [...]. What am I doing wrong?

Thanks, I'd appreciate a hint.

Upvotes: 2

Views: 7912

Answers (2)

Mark Hermano
Mark Hermano

Reputation: 31

I have rewritten the same npm package to be compatible with Vue 3 in typescript. It's called paperizer. You can see full docs here.

The plugin is based from vue-html-to-paper and supports both composition API (for those using script setup) and options API.

Upvotes: 3

Dan
Dan

Reputation: 63099

It uses Vue.prototype so it won't work with Vue 3 unless that's fixed. You could fork the repo if you wanted to fix it yourself.

To do so, replace this ❌:

install (Vue, options = {}) {
    Vue.prototype.$htmlToPaper = (el, localOptions, cb = () => true) => {

with this ✅ which will work for both Vue 2 and Vue 3:

install (Vue, options = {}) {
    let globals = Vue.prototype || Vue.config.globalProperties;
    globals.$htmlToPaper = (el, localOptions, cb = () => true) => {

When installing the plugin with Vue 3, follow the docs but replace Vue.use with app.use.

Upvotes: 9

Related Questions