Skip to content

Commit 227f698

Browse files
committed
📝 Update DOCS
1 parent 8d893eb commit 227f698

File tree

1 file changed

+24
-16
lines changed

1 file changed

+24
-16
lines changed

docs/README.md

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -287,25 +287,33 @@ Sometimes you need more control over chart.js. Thats why you can access the char
287287

288288
![Bubble](assets/bubble.png)
289289

290-
## Webpack, Browserify and dist files.
291290

292-
If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
293-
This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
294-
And you end up with two vue instances.
291+
## Explanation of Different Builds
292+
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
295293

296-
If you're using webpack 2 or rollup however, it will automatically import the transpiled ES sources.
297-
If you know what you're doing you can import directly from the transpiled es sources:
294+
- Browser
295+
- Browserify / Webpack 1
296+
- Webpack 2
298297

299-
```
300-
import { Line } from 'vue-chartjs/es'
301-
```
302298

303-
### Browserify
299+
| Build | Chart.js | Vue.js |
300+
|---|---|---|
301+
| vue-chartjs.full.js | Bundled | Bundled |
302+
| vue-chartjs.full.min.js | Bundled | Bundled |
303+
| vue-chartjs.js | peerDependency | peerDependency |
304+
| vue-chartjs.min.js | peerDependency | peerDependency |
305+
| es/index* | peerDependency | peerDependency |
304306

305-
In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
307+
### Borwser
308+
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.
306309

307-
```
308-
{
309-
"presets": ["es2015"]
310-
}
311-
```
310+
311+
### Browserify / Webpack 1
312+
313+
If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
314+
315+
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.
316+
317+
### Webpack 2
318+
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
319+
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.

0 commit comments

Comments
 (0)