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 share some experience for me?
Add a comment
|
5 Answers
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.
4 Comments
bcr
Edit:
created happens before the DOM gets painted so the component hadn't rendered a DOM to bind to yet...
wobsoriano
this also works when installing fabric-browseronly via npm
Wayne Smallman
I'm using Vue 3 with Vite, and when I use the import method I get:
SyntaxError: The requested module '/@modules/fabric/dist/fabric.js' does not provide an export named 'fabric'
abulka
@WayneSmallman Perhaps things have progressed, as importing fabric into vue3 worked for me. "fabric": "^5.3.0", "vue": "^3.2.47" e.g.
<script setup> import { fabric } from 'fabric'Fabric doesn't export fabric directly.
Try importing Canvas.
import { Canvas } from "fabric"
Comments
Composition API version of the code provided by @ben-winding.
<template>
<canvas ref="can" width="200" height="200"></canvas>
</template>
<script setup>
import { useTemplateRef, onMounted } from "vue";
import { fabric } from "fabric";
const can = useTemplateRef("can")
onMounted(() => {
const canvas = new fabric.Canvas(can.value)
const rect = new fabric.Rect({
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
})
</script>
Comments
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.
