Skip to content

Instantly share code, notes, and snippets.

@kurtroberts
Created December 3, 2021 23:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kurtroberts/930c0b08f3f66791185b899614102d26 to your computer and use it in GitHub Desktop.
Save kurtroberts/930c0b08f3f66791185b899614102d26 to your computer and use it in GitHub Desktop.
Only make vue-p5 available as a client-side component in Nuxt to avoid SSR and SSG render errors.
<!-- - components/MySketch.vue -->
<template>
<section class="sketch">
<client-only>
<VueP5
v-on="{setup, draw}">
</VueP5>
</client-only>
</section>
</template>
<script>
export default {
mounted () {
if (process.client) {
//do any setup you need to here
}
},
methods: {
setup(sketch) {
sketch.createCanvas(sketch.windowWidth, sketch.windowHeight);
sketch.background(255);
sketch.noStroke();
},
draw(sketch) {
sketch.background(255);
}
}
}
</script>
// - nuxt.config.js
//........
plugins: [
'@plugins/p5.client.js'
],
//......
// - plugins/p5.client.js
import Vue from 'vue';
import VueP5 from 'vue-p5';
Vue.component('VueP5', VueP5);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment