🔍 Seeking New Maintainer 🔍

This repository is currently not under active development and is searching for a new maintainer to take over and drive its future growth. If you're interested in becoming the new steward of this project, please get in touch. Your contribution can help keep this project alive and valuable for the community.

p5vue

This npm package provides a Vue 3 P5 componente which accepts a sketch property, making it extremely easy to get one or more p5 sketches running in Vue without scoping issues.

Compatible with Vue 3 & Nuxt Js.

📘 Docs + Examples

Usage

Install:

npm i p5vue

Depending on your environment, you may be alerted upon installing p5vue that p5 is a required peer dependency which you must install yourself. If this is the case:

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>

Nuxt 3 Setup

Setup for Nuxt 3 with SSR

To set the plugin up for Nuxt 3 we have to use some tricks to get it workin.

• Install p5vue

  npm i p5vue

• Add Plugin to nuxt

  • Crate a plugins folder in your root directory ~/plugins

  • add a p5vue.client.ts file in the plugins folder

  • Add the plugin to Nuxt like this:

    // p5vue.client.ts
    
    import { defineNuxtPlugin } from "#app"
    //@ts-ignore
    import p5vue from "p5vue"
    export default defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.use(p5vue)
    })

  • Create a P5Wrapper.client.vue file in ~/components

    // P5Wrapper.client.vue
    
    <script setup lang="ts">
    const props = defineProps(["sketch"])
    const sketch = props.sketch
    </script>
    
    <template>
      <P5 :sketch="sketch" />
    </template>

    We need this wrapper component to ensure p5 only loads on client side.

  • Now we can use our custom Wrapper inside the complete Nuxt App like this:

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

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>