Importing p5 into a Vue app

I added the p5 library into the dom like so...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/addons/p5.dom.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
</body>
</html>

So technically I should be able to grab it via window variable within my Vue code...

<template>
    <div id="app">
        <h1>Hey my app!</h1>
    </div>
</template>
<script>
export default {
    name: 'app',
    mounted() {
        console.log(window.p5) // it's found
        window.p5.createCanvas(640, 480);
    },
}
</script>

Yet error logs show: TypeError: window.p5.createCanvas is not a function. After logging window.p5, I can see that it's there. Just not createCanvas(). Which makes me think it's not fully there to begin with. Has anyone experienced this problem? How can I successfully import p5 and make use of it in my Vue app?

Importing p5 into a Vue app

1 Answers