looking for some solutions? You are welcome.

SOLVED: How to make Fabric js reactive using Vue js?


I am new in Vue js. So I am trying to do some practice using Fabric js and Vue js. I try to make my canvas reactive by using Vus js but nothing happens. By default in canvas, it displays "Text". Then after a button is clicked that text most change into "Test bus". But text in a canva is not change.


import Vue from 'vue'
import App from './App.vue'
import { fabric } from 'fabric'
import { eventBus } from './bus';

var vm = new Vue({
  el: '#app',
  data: {
    showText: 'Test'
  render: h => h(App),
  mounted() {
    var canvas = new fabric.Canvas('canvas', {
      width: 500,
      height: 500
    eventBus.$on('grabData', (gg) => {
      this.showText = gg;
    var addtext = new fabric.Textbox(this.showText, {
      left: 200,
      top: 200,
      fill: "#A7A9AC",
      strokeWidth: 2,
      fontFamily: 'Arial'


import Vue from 'vue';
export const eventBus = new Vue();


  <div id="app">
    <canvas id="canvas" :style="myStyle"></canvas>
    <button @click="changeName()">Change</button>

import { eventBus } from './bus';

export default {
  name: 'app',
  data () {
    return {
  methods: {
    changeName() {
      eventBus.$emit('grabData', "Test bus");
  computed: {
    myStyle() {
      return {
        border: '1px solid black'


Main.js contain a default text(Test) on showText variable. Its value is changed to the event bus through App.vue. And App.vue contain a button which helps to change the value of showText. When I click the button then Value only change in a showText variable but in a canvas.

Posted in S.E.F
via StackOverflow & StackExchange Atomic Web Robots

No comments: