![\"HC](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2018\/04\/20092349\/HC-vue-wrapper-1.gif\")
<\/p>\n
Remark<\/b><\/p>\n
The following technologies\/tools are used in the demo: NodeJS, Vue, Vue-CLI, and Webpack. Basic knowledge of Javascript and ES6 are recommended to follow along.<\/i><\/p>\n
The article is divided into two main sections. The first section is about setting up the environment, and the second is about how to use the wrapper itself.<\/p>\n
Let\u2019s get started.<\/p>\n
The environment setting<\/h2>\n
A bundler (Webpack<\/a>), a transpiler (babeljs<\/a>), and a loader (vue-loader<\/a>) are used to build the environment. The description of those tools is beyond the scope of this article. All you need to know right now is that Vue-cli<\/a> does all the heavy lifting configurations for you, such as the webpack configuration, the application skeleton, etc.<\/p>\n To set up the environment, create a new directory and navigate to it (using the terminal), then install Vue-cli using this command: Then type the following command to run a new vue project <\/p>\n Enter the directory created by Once the installation has finished, you will see that configuration files have been automatically added to your directory, such as index.html, App.vue, main.js, etc. Cool, right?<\/p>\n That is it; the environment setup is complete :).<\/p>\n Let\u2019s try out the wrapper! Open the main.js file and add the following code:<\/p>\n Then, register the wrapper on the global scope using Vue.use<\/a>: The demo displays three different charts: a spline chart, a stock chart, and a map chart. For better visibility and maintenance, let\u2019s create a component for each chart. Enter to the src directory and create a new directory called components. Add three empty files: Chart.vue, MapChart.vue, and StockChart.vue. Template<\/b><\/p>\n After the wrapper has been registered, you can use the Highcharts-vue component by adding the custom tag into the components.<\/p>\n The constructor-type attribute is set by default for chart<\/b>, so no need to add it. However, the constructor-type attribute is required for the stock and maps charts:<\/p>\n Script <\/b><\/p>\n The script element is where the chart\u2019s options and data are stored:<\/p>\n Don\u2019t forget to wrap those options and data into a component object to use it later: Style <\/b><\/p>\n There is nothing specific about the style element, as it is mainly CSS. It\u2019s worth mentioning that this element makes use of the <style scoped> attribute, which limits the scope of the style to that component only. You can copy the content of the three components files from this GitHub link<\/a>.<\/p>\n Next, import those components into the App.vue file:<\/p>\nnpm install -g vue-cli<\/code>.<\/p>\n![\"install](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/07\/20092826\/install-vue-cli.jpg\")
<\/p>\nvue init webpack-simple\u00a0<\/code><\/p>\n![\"new](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/07\/20092733\/new-vue-project.jpg\")
<\/p>\ncd yourFolder<\/code>. Run the following commands to install Highcharts and Highcharts Vue wrapper:<\/p>\nnpm install --save highcharts<\/code>
\nnpm install highcharts-vue<\/code><\/p>\n![\"install](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/07\/20092712\/install-highcharts-and-highcharts-vue.jpg\")
<\/p>\n![\"files](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/07\/20092849\/files-after-setting.jpg\")
<\/p>\nHow to use the wrapper<\/h2>\n
import Vue from 'vue'\r\nimport HighchartsVue from 'highcharts-vue'<\/pre>\n
vue.use<(HighchartsVue) <\/code><\/p>\n
\nEach file has three sections: template element, script element, and a style element.<\/p>\n:constructor-type=\"'mapChart'\"\r\n:constructor-type=\"'stockChart'\"<\/pre>\n
data() {\r\n return {\r\n title: '',\r\n points: [10, 0, 8, 2, 6, 4, 5, 5],\r\n chartType: 'Spline',\r\n seriesColor: '#6fcd98',\r\n colorInputIsSupported: null,\r\n chartOptions: {\r\n chart: {\r\n type: 'spline'\r\n },\r\n title: {\r\n text: 'Sin chart'\r\n },\r\n series: [{\r\n data: [10, 0, 8, 2, 6, 4, 5, 5],\r\n color: '#6fcd98'\r\n }]\r\n }\r\n }\r\n},\r\n<\/pre>\n Export default { \u2026 } <\/code><\/p>\nimport Chart from '.\/components\/Chart.vue'\r\nimport StockChart from '.\/components\/StockChart'\r\nimport MapChart from '.\/components\/MapChart'\r\n....\r\n components: {\r\n chart: Chart,\r\n stockChart: StockChart,\r\n mapChart: MapChart\r\n },<\/pre>\n