Error When clicking 'Print' button using 'Vue HTML to Paper' - vue.js

Question

I have a vue app and I'm trying to implement the 'Vue HTML to Paper'.
I have followed all the instructions on https://randomcodetips.com/vue-html-to-paper/ but when i click my 'Print' button I get the following error.
Main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import { routes } from './routes';
import { store } from './store/store';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import VueHtmlToPaper from 'vue-html-to-paper';
const router = new VueRouter({
// Loads page always at the top
scrollBehavior() {
$('.tooltip, .popover').tooltip('hide');
return { x: 0, y: 0 };
},
routes,
});
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=yes'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'https://unpkg.com/kidlat-css/css/kidlat.css'
]
}
Vue.use(VueRouter, VueHtmlToPaper, options);
...
Component
<template>
<div>
<loader v-if="loading" />
<div v-else class="form-group row d-flex justify-content-center">
<div class="col-10">
<div id="printMe" class="card">
<div class="card-header">
<div class="row d-flex align-items-center">
<div class="col">
Order details for: <span class="text-info">{{ 'PACK' + productOrder.id }}</span>
</div>
<div class="col d-flex justify-content-end">
<button class="btn btn-info" #click="print">Print</button>
......
<script>
export default {
data() {
return {
...
output: null
....
methods: {
print () {
// Pass the element id here
this.$htmlToPaper('printMe');
},
...

Answer 1

You can't register multiple plugins in one Vue.use.
Try replacing the line
Vue.use(VueRouter, VueHtmlToPaper, options);
With
Vue.use(VueRouter);
Vue.use(VueHtmlToPaper, options)