Inserting Vanilla JS into VueJS framework

Question

With the concept of VueJS is a kind of framework of JS, then it should have no problem inserting the vanilla JS into it. The following is the attempt to insert the pure JS code into vue-cli project(webpack structure).

[Before Start] I tried the example code as the following link(official document)

URL: https://codepen.io/Tobyliao/pen/ZEWNvwE?editable=true%3Dhttps%3A%2F%2Fdocs.bokeh.org%2F

it works.

[Question] As I tried to imlement into Vue project. It fails. picture1 is the directory structure.

I tried to place the src url include into ./public/html's tag as following:

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.1.min.js"></script>

Create a componet in './src/components/BokehPlot.vue'

inside the code, I insert

<template>
    <h1>Measurement Plotting</h1>
</template>
<script src='./main.js'>
export default {

}
</script>

Then finally place all the Bokeh code into './src/component/main.js'. It is the pure JS code I want to import into the structure.

[Result]

I can see the plot in the background, but it kept on showing the error message like picture2.

Can you upload a simplified version of your vue app? codesandbox.io/s/vue — Tim Wickstrom
– Tim Wickstrom, Commented Sep 30, 2020 at 6:07

tony19 · Accepted Answer · 2022-07-16 02:50:09Z

You have many options here, I went ahead and simply made a mixin to utilize the component lifecycle that Vue provides. source

Here are the relevant parts:

BokehPlot.vue

<template>
  <h1>治具量測</h1>
</template>
<script>
import Chart from "@/mixins/Chart";
export default {
  mixins: [Chart],
};
</script>

Chart.js

export default {
  data() {
    return {
      plot: null,
      xdr: null,
      ydr: null
    };
  },
  beforeMount() {
    // create some ranges for the plot
    this.xdr = new Bokeh.Range1d({ start: -1, end: 100 });
    this.ydr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });

    // make the plot
    this.plot = new Bokeh.Plot({
      title: "BokehJS Plot",
      x_range: this.xdr,
      y_range: this.ydr,
      plot_width: 400,
      plot_height: 400,
      background_fill_color: "#F2F2F7"
    });
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // create some data and a ColumnDataSource
      let x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
      let y = x.map(function (v) {
        return v * 0.5 + 3.0;
      });
      let source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });

      // add axes to the plot
      let xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
      let yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
      this.plot.add_layout(xaxis, "below");
      this.plot.add_layout(yaxis, "left");

      // add grids to the plot
      let xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
      let ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
      this.plot.add_layout(xgrid);
      this.plot.add_layout(ygrid);

      // add a Line glyph
      let line = new Bokeh.Line({
        x: { field: "x" },
        y: { field: "y" },
        line_color: "#666699",
        line_width: 2
      });
      this.plot.add_glyph(line, source);

      Bokeh.Plotting.show(this.plot);
    }
  }
};

Many decisions to still make, but hopefully that will get you pointed down the right path.

See working example: https://codesandbox.io/s/bokehjs-forked-4w20k?fontsize=14&hidenavigation=1&theme=dark

Hi @tim Thanks for the reply. But as I try to implement into my code, I still see the same issue as picture2 shown. Further, as I try to see inside the code sandbox. There are still some errors for "error 'Bokeh' is not defined"
But As far as I know, I've already added the included URL in ./public/index.html (codesandbox.io/s/…)
I am not seeing any errors in the console from the sandbox. Can you post the full contents from main.js, App.js, as well as one of the components you are using the new mixin in?
Thanks for the reply, there are some problems in codesandbox.io/s/…

Collectives™ on Stack Overflow

Inserting Vanilla JS into VueJS framework

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related