p5vue v0.0.7

Usage

Install:

npm i p5vue

npm i -D p5

Now add p5vue to your project:

• Import the Plugin to your main.js file

  // main.js || main.ts
  import { createApp } from "vue"
  import App from "./App.vue"
  
  import p5vue from "p5vue"
  
  createApp(App).use(p5vue).mount("#app")

• Use the P5 component inside the app

  <script setup>
  import p5 from "p5"
  
  const sketch = (p5) => {
    p5.setup = () => {
      p5.createCanvas(500, 500)
    }
  
    p5.draw = () => {
      p5.background("#fff000")
    }
  }
  </script>
  
  <template>
  	<P5 :sketch="sketch"/>
  </template>

Output:

Typescript:

Typescript inst fully supported yet. To get the Plugin working without type errors do this:

• // main.ts
  import { createApp } from "vue"
  import App from "./App.vue"
  // @ts-ignore
  import p5vue from "p5vue"
  
  createApp(App).use(p5vue).mount("#app")

• // Add the p5 type in function argument
  <script setup>
  import p5 from "p5"
  
  const sketch = (p5: p5) => {
    p5.setup = () => {
      p5.createCanvas(500, 500)
    }
  
    p5.draw = () => {
      p5.background("#fff000")
    }
  }
  </script>
  
  <template>
  	<P5 :sketch="sketch"/>
  </template>