Including additional js libraries

[gioxc88]

Is there a way to include additional javascript libraries or custom js modules?

[tedwards-flf]

I would also very much like to know how to do this.

I am able to define data and methods in the script tag of the vuetify template; I started by implementing the datatable example and then added a script tag above the template to modify the filtering behaviour, like so:.

import ipyvuetify as v
import traitlets

TEMPLATE = '''
<script>
export default {
    'data': {
        ...
    },
    'methods': {
        customFilter(value, search, item) {
            ...
        }
    }
}
</script>
<template>
    <v-data-table
            :headers="headers"
            :items="items"
            :search="search"
    >
</template>
'''

class VuetifyTest(v.VuetifyTemplate):
    template = traitlets.Unicode(TEMPLATE).tag(sync=True)

VuetifyTest()

However, I can't get imports to work, it seems that any lines of javascript above export default { are ignored.

[mariobuikhuizen]

You could import libraries with requirejs:

export default {
  methods: {
    updatePlot() {
      requirejs(['https://cdn.plot.ly/plotly-1.58.4.min.js'], (Plotly) => {
        Plotly.react(...)
      })
    }
  }
}

But you can't add any javascript outside export default {...} with ipyvuetify-template. Ipyvuetify-template tries to look like Vue as much as possible, but is different in some places.

[gioxc88]

You could import libraries with requirejs:

export default {
  methods: {
    updatePlot() {
      requirejs(['https://cdn.plot.ly/plotly-1.58.4.min.js'], (Plotly) => {
        Plotly.react(...)
      })
    }
  }
}

But you can't add any javascript outside export default {...} with ipyvuetify-template. Ipyvuetify-template tries to look like Vue as much as possible, but is different in some places.

thanks for the answer, that is very useful.
Can I ask instead if I were to fork the project if there is a way to change the structure of the package such that any additional js library or file is made available for all the vue templates?

Many thanks

[tedwards-flf]

You could import libraries with requirejs:

export default {
  methods: {
    updatePlot() {
      requirejs(['https://cdn.plot.ly/plotly-1.58.4.min.js'], (Plotly) => {
        Plotly.react(...)
      })
    }
  }
}

But you can't add any javascript outside export default {...} with ipyvuetify-template. Ipyvuetify-template tries to look like Vue as much as possible, but is different in some places.

I couldn't get this to work, it says "requirejs not defined". When I try to follow the instructions from requirejs it says to include a script tag which loads the require.js module, and to put the source code in a separate javascript file (for example, app.js), like so:

<script data-main="js/app.js" src="js/require.js"></script>

but then that doesn't work either.

[mariobuikhuizen]

Ah, yes, in Jupyter Lab requirejs is not available (in the classic notebook and in Voila it is), you could load it yourself:

...
methods: {
    async updatePlot() {
      await this.loadRequire()
      requirejs(['https://cdn.plot.ly/plotly-1.58.4.min.js'], (Plotly) => {
         console.log('Plotly loaded', Plotly)
         // Plotly.react(...)
      })
    },
    loadRequire() {
      if (window.requirejs) {
          return Promise.resolve()
      }
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    }
  }

[tedwards-flf]

Ah, yes, in Jupyter Lab requirejs is not available (in the classic notebook and in Voila it is), you could load it yourself:

...
methods: {
    async updatePlot() {
      await this.loadRequire()
      requirejs(['https://cdn.plot.ly/plotly-1.58.4.min.js'], (Plotly) => {
         console.log('Plotly loaded', Plotly)
         // Plotly.react(...)
      })
    },
    loadRequire() {
      if (window.requirejs) {
          return Promise.resolve()
      }
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    }
  }

Thanks, trying out your example in classic jupyter notebook or voila works. However, I'd like to download the javascript module and import it locally. When I attempt to do that with the plotly example, I get a 403 (forbidden error). I put the plotly-1.58.4.min.js file in a folder called js/ and do chmod -R 777 js and ensure that I own the file and that all the permissions are set.

Can requirejs work with local files?

[mariobuikhuizen]

requirejs can, but jupyter-server doesn't serve files from your working directory. I don't know how to get it to serve static files.

[gioxc88]

I see for example lodash is included
How can I make additional libraries to be available for import in the script tag?