https://github.com/bensladden/vue-fabric-wrapper

Vue Fabric.js Wrapper
https://github.com/bensladden/vue-fabric-wrapper

fabric fabricjs vue vue-components vuejs

Last synced: about 2 months ago
JSON representation

Vue Fabric.js Wrapper

• Host: GitHub
• URL: https://github.com/bensladden/vue-fabric-wrapper
• Owner: bensladden
• License: mit
• Archived: true
• Created: 2019-11-04T10:45:01.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T11:59:57.000Z (almost 2 years ago)
• Last Synced: 2024-09-19T13:30:20.606Z (about 2 months ago)
• Topics: fabric, fabricjs, vue, vue-components, vuejs
• Language: Vue
• Homepage: https://vue-fabric-wrapper.netlify.com
• Size: 6.24 MB
• Stars: 112
• Watchers: 6
• Forks: 30
• Open Issues: 83
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# vue-fabric-wrapper



	

	

	

	

	



[![Netlify Status](https://api.netlify.com/api/v1/badges/c31e91bb-b672-483c-bf98-1582de3cfaec/deploy-status)](https://app.netlify.com/sites/vue-fabric-wrapper/deploys)

Stick Man Example: [![Edit StickMan](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/stickman-rltsr?fontsize=14&hidenavigation=1&theme=dark)

## Currently implemented the following Fabric Objects:

  Fabric.Canvas,

  Fabric.Circle,

  Fabric.Ellipse,

  Fabric.Group,

  Fabric.ImageFromURL,

  Fabric.Line,

  Fabric.Path,

  Fabric.Polygon,

  Fabric.Polyline,

  Fabric.Rectangle,

  Fabric.SVGFromURL,

  Fabric.Text,

  Fabric.Triangle

## ⚙️ Installation

```sh

$ npm install vue-fabric-wrapper

```

## 📄 Documents

[Link](https://vue-fabric-wrapper.netlify.com/)

## 🚀 How to use in Vue

```vue

  


    

      

    

  


import vueFabricWrapper from "vue-fabric-wrapper";

export default {

  name: "App",

  components: {

    FabricCanvas: vueFabricWrapper.FabricCanvas,

    FabricCircle: vueFabricWrapper.FabricCircle

  }

};

#app {

  font-family: "Avenir", Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

```

## 🚀 How to use in Nuxt

Create Plugin with the following example code

```

import Vue from 'vue';

import vueFabricWrapper from 'vue-fabric-wrapper';

Vue.component("FabricCanvas", vueFabricWrapper.FabricCanvas)

Vue.component("FabricCircle", vueFabricWrapper.FabricCircle)

```

Add this to nuxt.config and use mode client

```

module.exports = {

	plugins: [

			{ src: "@/plugins/fabric.js", mode: "client" }

		]

}

```

Finally use client-only to render only on the client side

```

  

    

      

    

  

export default {

};

```

## ⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

## 👏 Contributing

If you have any questions or requests or want to contribute to `vue-fabric-wrapper` or other packages, please write the [issue](https://github.com/bensladden/vue-fabric-wrapper/issues) or give me a Pull Request freely.

## 🐞 Bug Report

If you find a bug, please report to us opening a new [Issue](https://github.com/bensladden/vue-fabric-wrapper/issues) on GitHub.

## ⚙️ Development

### `npm run serve`

Runs the app in the development mode.


Open [http://localhost:8080](http://localhost:8080) to view it in the browser.

The page will reload if you make edits.


You will also see any lint errors in the console.