Skip to content

Commit

Permalink
Update documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Elie Prudhomme committed May 3, 2016
1 parent 1e0b10b commit 5f3666a
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 2 deletions.
30 changes: 29 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
...
Expand All @@ -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>
Expand Down
34 changes: 33 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand All @@ -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>
Expand Down

0 comments on commit 5f3666a

Please sign in to comment.