How can I set up Fabric.js in vue?

Question

I just came across the same combination: Fabric.js and Vue.js and was wondering, but I\'m working with VueJs few days and I don\'t know how to set up fabric in vue.
Can you

Answer 1

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>

Answer 2

Fabric follows a pretty traditional distribution layout.

You want to use files from the dist directory. fabric.js for development work and fabric.min.js for the live site.

Answer 3

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.