David-Desmaisons / vue-plotly

📈 vue wrapper for plotly.js
https://david-desmaisons.github.io/vue-plotly/
MIT License
255 stars 74 forks source link

Enable library to be used as a Vue plugin #44

Closed jourdain closed 2 years ago

jourdain commented 2 years ago

Ideally the name of the library should be updated so we could write Vue.use(VuePlotly) instead of Vue.use(window['vue-plugin']).

This would allow the following usage (Extension of this issue/solution)

<!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.use(VuePlotly);
    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>