How connect SciChart to Nuxt

Question

I need how coonect SciChart to Nuxt.js i did

npm init nuxt-app "scichart" npm install scichart and i catch error

packeg.json

{
  "name": "scichart",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "buildsci": "webpack",
    "startsci": "webpack-dev-server"
  },
  "dependencies": {
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "scichart": "^2.0.0"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^6.3.2",
    "webpack": "^4.46.0 ",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1"
  }
}

yesteday. SciChart support just did for my example https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-nuxtjs — Альберт Халимов, Dec 02 '21 at 09:55

score 1 · Answer 1 · answered May 02 '22 at 09:09

There are now a number of samples on the SciChart.js Github showing how to setup SciChart in frameworks. These include:

Plus many more. The common problem with these frameworks is loading WebAssembly. SciChart.js uses WebAssembly to achieve really high performance 2D & 3D charts & graphs. Wasm file needs to be in the output folder when your project is built. This is different for every framework.

There is now a page on the SciChart.js Documentation showing how to load webassembly flawlessly without requiring Webpack or Copy plugins in package.json.

See the how-to article here: Creating a new SciChartSurface and loading Wasm

Deploying Wasm (WebAssembly) and Data Files with your app

If you receive an error message when running your app, you may not have deployed the Wasm (WebAssembly) or data files correctly. Below are some steps on how to resolve that.

Error: Could not load SciChart WebAssembly module. Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version

Option 1: Package Wasm & Data Files with WebPack (or similar) ...

Option 2: Load Wasm from URL with SciChartSurface.configure() or useWasmFromCDN() ...

We've packaged a helpful function that automatically loads the latest & correct version of SciChart's Wasm & Data files from CDN.

To use this, instead of calling SciChartSurface.configure() passing in a URL, call SciChartSurface.useWasmFromCDN().
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";

export async function initSciChart() {
    // Call this once before any SciChartSurface is shown.
    // This is equivalent to calling SciChartSurface.configure() with the CDN URL (JSDelivr)
    SciChartSurface.useWasmFromCDN();
}

How connect SciChart to Nuxt

1 Answers1