Updated Vue readme

Author: adeelraza

README.md

@@ -1,26 +1,114 @@
-# vue-email-editor
+# Vue Email Editor
 
-## Project setup
-```
-yarn install
-```
+The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com) as a [Vue](https://vuejs.org/) *wrapper component*. This is the most powerful and developer friendly visual email builder for your app.
 
-### Compiles and hot-reloads for development
-```
-yarn run serve
-```
+Video Overview |
+:---: |
+[![Vue Email Editor](https://s3.amazonaws.com/unroll-assets/unrollyoutube.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
+*Watch video overview: https://youtu.be/MIWhX-NF3j8* |
+
+## Live Demo
+
+Check out the live demo here: https://vue-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/vue-email-editor/tree/master/src))
+
+## Installation
+
+The easiest way to use Vue Email Editor is to install it from Npm or Yarn and include it in your own Vue build process.
 
-### Compiles and minifies for production
 ```
-yarn run build
+npm install vue-email-editor --save
 ```
 
-### Run your tests
+or
+
 ```
-yarn run test
+yarn add vue-email-editor
 ```
 
-### Lints and fixes files
-```
-yarn run lint
+## Usage
+
+Next, you'll need to import the Email Editor component to your app.
+
+**App.vue**
+
+```html
+<template>
+  <div id="app">
+    <div class="container">
+      <div id="bar">
+        <h1>Vue Email Editor (Demo)</h1>
+
+        <button v-on:click="saveDesign">Save Design</button>
+        <button v-on:click="exportHtml">Export HTML</button>
+      </div>
+
+      <EmailEditor ref="editor" v-on:load="editorLoaded" />
+    </div>
+  </div>
+</template>
+
+<script>
+  import EmailEditor from 'vue-email-editor'
+  
+  export default {
+    name: 'app',
+    components: {
+      EmailEditor
+    },
+    methods: {
+      editorLoaded() {
+        this.$refs.editor.loadDesign(sample);
+      },
+      saveDesign() {
+        this.$refs.editor.saveDesign(
+          (design) => {
+            console.log('saveDesign', design);
+          }
+        )
+      },
+      exportHtml() {
+        this.$refs.editor.exportHtml(
+          (data) => {
+            console.log('exportHtml', data);
+          }
+        )
+      }
+    }
+  }
+</script>
 ```
+
+### Methods
+| method          | params                   | description                                                    |
+| --------------- | ------------------------ | -------------------------------------------------------------- |
+| **loadDesign**  | `Object data`            | Takes the design JSON and loads it in the editor               |
+| **saveDesign**  | `Function callback`      | Returns the design JSON in a callback function                 |
+| **exportHtml**  | `Function callback`      | Returns the design HTML and JSON in a callback function        |
+
+### Properties
+
+* `minHeight` `String` minimum height to initialize the editor with (default 500px)
+* `options` `Object` options passed to the Unlayer editor instance (default {})
+* `tools` `Object` configuration for the built-in and custom tools (default {})
+* `appearance` `Object` configuration for appearance and theme (default {})
+* `projectId` `Integer` Unlayer project ID (optional)
+* `locale` `String` translations string (default en-US)
+
+See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.
+
+See the [example source](https://github.com/unlayer/vue-email-editor/tree/master/src) for a reference implementation.
+
+## Custom Tools
+
+Custom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential. [Learn More](https://docs.unlayer.com/docs/custom-tools)
+
+[![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/docs/custom-tools)
+
+
+## Localization
+
+You can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)
+
+### License
+
+Copyright (c) 2020 Unlayer. [MIT](LICENSE) Licensed.