From e38e208532fb7cce036e94c683c6f6dad40bda36 Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Sat, 4 Mar 2017 15:32:10 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Update=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 25 ++++++++----------------- docs/README.md | 17 ++++++++--------- 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 0b32b10..d14b254 100644 --- a/README.md +++ b/README.md @@ -177,29 +177,20 @@ export default Line.extend({ }) ``` -## Webpack & Bundling tools -There are now two version the main entry point is `src/index.js` which is the ES6 source, unbundled. -If you're using webpack it is recommended to use this one. Because the bundled umd version has vue.js and chart.js bundled into it. +## Webpack, Browserify and dist files. -However if you have problems o you can import the dist file +If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js +This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file. +And you end up with two vue instances. + +If you're using webpack 2 however, it will automatically import the transpiled ES sources. +If you know what you're doing you can import directly from the transpiled es sources: ``` -import VueCharts from 'vue-chartjs/dist/vue-chartjs' -// or -import { Line } from 'vue-chartjs/dist/vue-chartjs' +import { Line } from 'vue-chartjs/es' ``` -Or you can set an alias. -### Browserify - -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: - -``` -{ -"presets": ["es2015"] -} -``` ## Available Charts ### Bar Chart diff --git a/docs/README.md b/docs/README.md index 9ace703..7f57ddb 100644 --- a/docs/README.md +++ b/docs/README.md @@ -279,20 +279,19 @@ Sometimes you need more control over chart.js. Thats why you can access the char ![Bubble](assets/bubble.png) -## Webpack & Bundling tools -There are now two version the main entry point is `src/index.js` which is the ES6 source, unbundled. -If you're using webpack it is recommended to use this one. Because the bundled umd version has vue.js and chart.js bundled into it. +## Webpack, Browserify and dist files. -However if you have problems o you can import the dist file +If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js +This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file. +And you end up with two vue instances. + +If you're using webpack 2 or rollup however, it will automatically import the transpiled ES sources. +If you know what you're doing you can import directly from the transpiled es sources: ``` -import VueCharts from 'vue-chartjs/dist/vue-chartjs' -// or -import { Line } from 'vue-chartjs/dist/vue-chartjs' +import { Line } from 'vue-chartjs/es' ``` -Or you can set an alias. - ### Browserify 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: