Skip to content

Commit 8d893eb

Browse files
committed
📝 Update README
1 parent 1b527e9 commit 8d893eb

File tree

1 file changed

+34
-15
lines changed

1 file changed

+34
-15
lines changed

README.md

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,40 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue
3232

3333
## Install
3434

35-
Simply run `npm install vue-chartjs`
35+
Simply run `yarn add vue-chartjs chart.js`
36+
37+
Or if you want to use it directly in the browser add `https://unpkg.com/[email protected]/dist/vue-chartjs.full.min.js` to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
38+
39+
## Explanation of Different Builds
40+
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
41+
42+
- Browser
43+
- Browserify / Webpack 1
44+
- Webpack 2
45+
46+
47+
| Build | Chart.js | Vue.js |
48+
|---|---|---|
49+
| vue-chartjs.full.js | Bundled | Bundled |
50+
| vue-chartjs.full.min.js | Bundled | Bundled |
51+
| vue-chartjs.js | peerDependency | peerDependency |
52+
| vue-chartjs.min.js | peerDependency | peerDependency |
53+
| es/index* | peerDependency | peerDependency |
54+
55+
### Borwser
56+
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
57+
58+
59+
### Browserify / Webpack 1
60+
61+
If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
62+
63+
However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
64+
65+
### Webpack 2
66+
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
67+
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work. Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
68+
3669

3770
## How to use
3871

@@ -178,20 +211,6 @@ export default Line.extend({
178211
})
179212
```
180213

181-
## Webpack, Browserify and dist files.
182-
183-
If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
184-
This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
185-
And you end up with two vue instances.
186-
187-
If you're using webpack 2 however, it will automatically import the transpiled ES sources.
188-
If you know what you're doing you can import directly from the transpiled es sources:
189-
190-
```
191-
import { Line } from 'vue-chartjs/es'
192-
```
193-
194-
195214
## Available Charts
196215

197216
### Bar Chart

0 commit comments

Comments
 (0)