Pencil.js ❤️ Vue - Build reactive 2D graphics scene in your Vue project
npm install vue-pencil.js
You need to install
vueandpencil.jsyourself alongsidevue-pencil.js.
You have 3 choices:
- Install
vue-pencil.jsglobally and use it wherever you want in yourVuejsapp. - Import only components you need in your
Vuejscomponents. - Use a direct
<script>tag to include from a CDN.
import Vue from "vue";
import Pencil from "vue-pencil.js";
const options = {
prefix: "p", // Change the component's prefix (default: "p")
};
Vue.use(Pencil, options);
new Vue({
el: "#app",
template: `
<p-scene>
<p-circle :radius="100" :position="[100, 100]" />
</p-scene>
`,
});<template>
<PScene>
<PCircle :radius="100" :position="[100, 100]" />
</PScene>
</template>
<script>
import { Components } from "vue-pencil.js";
const { PScene, PCircle } = Components;
export default {
name: "App",
components: {
PScene,
PCircle,
},
};
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div id="app"></div>
<!-- Vue script tag-->
<script src="https://unpkg.com/vue"></script>
<!-- Pencil.js script tag-->
<script src="https://unpkg.com/pencil.js"></script>
<!-- vue-pencil.js script tag-->
<script src="https://unpkg.com/vue-pencil.js"></script>
<script>
new Vue({
el: "#app",
template: `
<p-scene>
<p-circle :radius="100" :position="[100, 100]" />
</p-scene>
`,
});
</script>
</body>
</html>Check out working examples in the examples directory.
Any contribution abiding to the code of conduct is welcome.
