This plugin isn't just a wrapper of the Scichart API, but provides a better solution on importing modules you need to use in certain charts and have a faster option method you can just pass and you done need to create.

:electric_plug: Install

# npm usage
npm install vue-scichart --save

# yarn usage
yarn add vue-scichart

:sparkles: Usage

vue-scichart can be used as a vue directive from your javascript. We should pass the key of Scichart as well. You can use form a .env file for example.

import Vue from 'vue'
import scichart from 'vue-scichart'

const opts = {
  key: process.env.YOUR_SCICHART_KEY

Vue.use(scichart, opts)

But that's not everything we need. We should get two files before we can start creating new charts. the files are and scichart2d.wasm and they are different on vue/nuxt context.


You should change your vue config file, and add write-file-webpack-plugin and copy-webpack-plugin with specific versions

npm install [email protected] --save-dev 
npm install [email protected] --save-dev

on vue.config.js:

const path = require('path');
const WriteFilePlugin = require('write-file-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new WriteFilePlugin(),
      new CopyWebpackPlugin({
        patterns: [
            from: path.join(
            to: path.join(
              process.env.NODE_ENV === 'production' ? 'dist' : 'public'
            from: path.join(
            to: path.join(
              process.env.NODE_ENV === 'production' ? 'dist/js' : 'public/js'

After change our vue.config.js file we can on main Vue file, in my case will be on main.js

import Vue from 'vue';
import App from './App.vue';
import scichart from 'vue-scichart';

Vue.config.productionTip = false;

Vue.use(scichart, {
  key: process.env.VUE_APP_SCICHART_KEY, // I'm using .env

new Vue({
  render: (h) => h(App),

After we can use on our component as we need

    <line-chart />


import { LineChart } from 'vue-scichart'

export default {
  components: {


More about which chart we can import and use, check our docs, on Component Attributes