From 5f3666a1356fe430080fcdb44188c000f4d21ec2 Mon Sep 17 00:00:00 2001
From: Elie Prudhomme <eprudhomme@v3d.fr>
Date: Tue, 3 May 2016 14:07:19 +0200
Subject: [PATCH] Update documentation

---
 README.md  | 30 +++++++++++++++++++++++++++++-
 index.html | 34 +++++++++++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2eb11fa..2ada46a 100644
--- a/README.md
+++ b/README.md
@@ -20,11 +20,13 @@ You can find a few examples and the documentation [here](https://eliep.github.io
 `npm install vue-avatar`
 
 ## Usage
+vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments.
+When in non-modular environment, Avatar will be registered as a global variable.</p>
 
 ### ES6
 ```js
 
-import Avatar from 'vue-avatar'
+import Avatar from 'vue-avatar/dist/Avatar'
 
 export default {
   ...
@@ -41,9 +43,35 @@ After that, you can use it in your templates:
 ```
 
 ### ES5
+```js
+var Vue = require('vue')
+var Avatar = require('vue-avatar')
+
+var YourComponent = Vue.extend({
+  ...
+  components: {
+    'avatar': Avatar.Avatar
+  },
+  ...
+})
+```
 
 ### Browser
 
+```
+<script src="path/to/vue/vue.min.js"></script>
+<script src="path/to/vue-avatar/dist/vue-avatar.min.js"></script>
+
+new Vue({
+  ...
+  components: {
+    'avatar': Avatar.Avatar
+  },
+  ...
+})
+```
+
+
 ## Props
 <table class="table">
 <thead><tr>
diff --git a/index.html b/index.html
index c64a9d2..0b89639 100644
--- a/index.html
+++ b/index.html
@@ -74,11 +74,13 @@ <h2>Installation</h2>
         <pre><code class="language-html">npm install vue-avatar</code></pre>
 
         <h2>Usage</h2>
+        <p>vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments.
+          When in non-modular environment, Avatar will be registered as a global variable.</p>
 
         <h3>ES6</h3>
 
         <pre><code class="language-javascript">
-import Avatar from 'vue-avatar'
+import Avatar from 'vue-avatar/dist/Avatar'
 
 export default {
 
@@ -94,6 +96,36 @@ <h3>ES6</h3>
         <p>which will render to:</p>
         <avatar username="Jane Doe"></avatar>
 
+
+
+        <h3>ES5</h3>
+
+        <pre><code class="language-javascript">
+var Vue = require('vue')
+var Avatar = require('vue-avatar')
+
+var YourComponent = Vue.extend({
+  components: {
+    'avatar': Avatar.Avatar
+  }
+})
+        </code></pre>
+
+
+
+        <h3>Browser</h3>
+
+        <pre><code class="language-html">
+&lt;script src="path/to/vue/vue.min.js"&gt;&lt;/script&gt;
+&lt;script src="path/to/vue-avatar/dist/vue-avatar.min.js"&gt;&lt;/script&gt;
+
+new Vue({
+  components: {
+    'avatar': Avatar.Avatar
+  }
+})
+        </code></pre>
+
         <h2>Props</h2>
         <table class="table">
         <thead><tr>