How can I set up Fabric.js in vue?

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.

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>

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.