How to use in a Nuxt app?

[bhuvidya]

How to use in a Nuxt app?

[bhuvidya]

Ok I found the solution - p5 has to exist on the window object when the p5.js-svg code is loaded. So because I am manually loading p5 in my nuxt code (as it is installed as an npm package), I end up with code like this:

// manually load the p5 package
const { default: P5 } = await import('p5');

// and then manually load the p5.js-svg package, as it won't init unless it finds p5
// on the window object (see https://github.com/zenozeng/p5.js-svg/blob/main/src/index.js)
window.p5 = P5;
let script = document.createElement('script');
script.setAttribute('src', 'https://unpkg.com/[email protected]');
document.body.appendChild(script);

and this works! I get the animation rendered as SVG, and when I call sketch.save() it saves as svg too. Brilliant!