Kinrany / vue-p5

Vue component for p5.js
125 stars 16 forks source link

Set up for Nuxt #36

Closed andresclua closed 2 years ago

andresclua commented 2 years ago

this is a tip that could be added for users who want to work with nuxt. It could be great to add it in readme

In nuxt.config.js

  plugins: [
    { src: '@/plugins/p5.js', ssr: false },
  ],

plugin set up.

import Vue from 'vue';
import VueP5 from 'vue-p5';

Vue.component('VueP5',VueP5)

Vue component

<template>
  <div>
   <vue-p5 v-on="{setup,draw}"></vue-p5>
  </div>
</template>

<script>

export default {
  data:()=>{
    return{
      name:'andres'
    }
  },
  methods: {
    setup(sketch) {
      sketch.createCanvas(400, 400);
      sketch.background('green');
      sketch.text(this.name, 20, 20);
    },
    draw(sketch){
        sketch.line(sketch.pmouseX, sketch.pmouseY, sketch.mouseX, sketch.mouseY);
    }
  },
  render(h) {
    return h(VueP5, {
      setup: this.setup,
      draw: this.draw,
    });
  }
};
</script>
Kinrany commented 2 years ago

Hi, thanks for your contribution. Unfortunately I don't have the bandwidth to maintain guides for using vue-p5 with other libraries beyond ECMAScript standard, p5 and Vue. We could add a section to the README with a link to this issue though.