Não consigo importar uma biblioteca | Vue.js parte 2: construindo Single Page Applications

Já assisti a aula de como importar bibliotecas como o jQuery ou outros arquivos js de nossa preferência, porém ainda não estou conseguindo importar uma biblioteca que eu utilizo, o p5.js

p5.js é uma biblioteca para criar animações em um canvas como por exemplo para exibir um círculo preto na tela:

function setup() {
    createCanvas(500, 500)
    fill(0)
    ellipse(100, 100, width / 2, height / 2)
}

Normalmente deixo a parte do código em um arquivo sketch.js e o importo no index.html juntamente com a biblioteca:

<!DOCTYPE html>
<html>
  <head>
    <script src="libraries/p5.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

Já que por padrão todas as funções estão em global namespace basta simplesmente chama-la, como em ellipse(), que já funciona (desde que a biblioteca tenha sido referenciada no index.html)

Além disso é preciso que as funções estejam dentro de alguma função principal, como é o caso de function setup() onde por padrão, a biblioteca a chama como início do programa. Ou em function draw() que é uma função que fica em loop, onde cada interação é um frame na animação do canvas.

Eu gostaria de utilizar os recursos que a biblioteca oferece, dentro de seu respectivo canvas, porém este estando numa SPA utilizando o Vue, com por exemplo em uma página há o componente canvas e nele funciona os recursos oferecidos pela biblioteca.

O p5.js permite que você atribua o canvas como o filho de algum elemento no DOM, especificando através de seu id, como por exemplo:

Em index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="libraries/p5.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <h1>Teste</h1>
    <p id="meuCanvas">Aqui está o Canvas</p>
    <p>Outro parágrafo</p>
  </body>
</html>

E no sketch.js fica assim:

function setup() {
    let c = createCanvas(500, 500)
    c.parent('#meuCanvas') // Definindo o pai do canvas
    ellipse(100, 100, 250, 250)
}

Por mais que eu importe em main.js, seja pelo arquivo próprio ou usando seu package

import './assets/p5.min.js'
import './assets/sketch.js'

O sketch.js não reconhece a biblioteca, e assim todo código dentro dele não é executado. Então eu preciso saber como deixar o código em p5.min.js global, de modo que qualquer outro arquivo js possa utilizar de suas funções.

Preciso que seja qualquer outro arquivo (ou se puder eu especificar os que quero) pois não crio apenas o sketch.js, normalmente crio arquivos contendo classes ou mesmo outros que utilizam dos recursos da biblioteca.

Além disso preciso saber como atribuir o canvas à algum componente do Vue, para que assim eu possa posiciona-lo como desejar.

Alguns links que achei útil durante minha pesquisa mas ainda sim não consegui resolver:

Por favor, me ajudem! Espero ter sido claro na minha dúvida, mas caso algo tenha ficado um pouco confuso, só dizer que eu tento explicar melhor.

Consegui da seguinte forma:

Em main.js

import Vue from 'vue'
import App from './App.vue'
import './assets/sketch.js'

new Vue({
    el: '#app',
    render: h => h(App)
})

Em sketch.js

import p5 from 'p5'

function p(p5) {
    p5.setup = function() {
        let canvas = p5.createCanvas(500, 500)
        canvas.parent('CanvasComponent')
        p5.background(51)
        p5.fill(255)
        p5.ellipse(200, 200, 250, 250)
    }
}

new p5(p);

E no componente Vue em que deseja colocar o canvas basta referenciar algum elemento com o id

<template>
  <div id="app">
    <p id="CanvasComponent">O canvas está aqui</p>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style scoped>
</style>

Uma observação é que não foi preciso colocar o plugin em webpack.config.js para funcionar

Mergulhe em programação