How can I set up Fabric.js in vue?
Install Fabric
yarn add fabric # or npm install -s fabric
Basic component (based on @laverick's answer):
<template>
<canvas ref="can" width="200" height="200"></canvas>
</template>
<script>
import { fabric } from 'fabric';
export default {
mounted() {
const ref = this.$refs.can;
const canvas = new fabric.Canvas(ref);
const rect = new fabric.Rect({
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
}
};
</script>
Assuming you're using ES6 and a bundler such as Webpack you can start using Fabric.js as follows:
At the command line
npm install fabric
or
yarn add fabric
Then import it in your .js file.
import { fabric } from 'fabric'
Then set up your Canvas
in Vue's mounted:
method.
Note: For me the default fabric
npm module resulted in quite a large package. I ended up using the fabric-browseronly
module instead. Fabric.js has a lot of features you might not need, in which case you could build your own version here or via the command line.