How to use puppeteer in vue.js

I'm trying to integrate puppeteer in a vue.js application to generate screenshots and pdf files. I have write a function that use puppeteer to generate a screenshot, works perfectly.

export const MyScripts = {
    getMiniature : async function(elementId, key) {
        const puppeteer = require('puppeteer');
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        // Making a screenshot
    }
}

When trying to integrate that function, it fails to load puppeteer. The 'require' doesn't generate error, but when I call puppeteer.launch(), I got the following message:

TypeError: nodeFunction is undefined

I've read that puppeteer is not supposed to work with front-end application, so I hope I have not chosen the wrong direction.

So how can I make it work ? If it is not possible, what can I use to generate screenshots or pdf ?

Thanks in advance

Puppeteer works with Node, it has nothing to do with Vue. Node.js is pretty much JavaScript running on a server and therefore separated from your frontend. Puppeteer uses a headless browser(and therefore your actualy system) to generate the screenshots and PDF files.

A client-side browser has no access to your filesystem and so therefore you can't use it in a frontend framework like Vue to generate screenshots and save them.

I don't know of any tools to generate screenshots of the current page that are not highly experimental but I am sure you could find some more information when deep-diving stackoverflow.