vue-plotly icon indicating copy to clipboard operation
vue-plotly copied to clipboard

UMD build does not work

Open simevo opened this issue 5 years ago • 1 comments

I tried this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test vue-plotly</title>
    <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
  </head>
  <body>
    <div id="settings">
      <v-plotly :data="plots" :layout="layout" :display-mode-bar="false" :displaylogo="false" ></v-plotly>
    </div>
  </body>
  <script src="https://unpkg.com/vue-plotly@latest/dist/vue-plotly.umd.js"></script>
  <script>
    Vue.component('v-plotly', Plotly);
    var app = new Vue({
      el: '#settings',
      data: {
        parameters: [],
        sensors: {},
        plots: [
          {
            x: [1, 2, 3, 4],
            y: [10, 15, 13, 17],
            type: "scatter"
          }
        ],
        layout: {
          title: "My graph"
        }
      }
    });
  </script>
</html>

results:

index.html:14 Uncaught ReferenceError: Plotly is not defined
    at index.html:14

simevo avatar Jun 26 '20 17:06 simevo

This works:

<vue-plotly :data="plots" :layout="layout" :display-mode-bar="false" :displaylogo="false" ></vue-plotly>

and:

Vue.component('vue-plotly', window['vue-plotly'].Plotly);

you may want to mention this in the docs / provide an example

simevo avatar Jun 27 '20 05:06 simevo