Integrate JQuery into Vaadin Flow

JQuery used to be one of the top JavaScript libraries and it is still really popular today. This tutorial demonstrates three alternative ways to integrate jQuery in your Vaadin project and check that it’s loaded.

To import the jQuery library from a CDN (content delivery network) into a Java view, add the @JavaScript annotation to a component:

jQuery is now loaded and can be called from your Java code.

You can also test jQuery from a javascript file:

1. Create a new file jquery-test.js in frontend/src:

   if (typeof jQuery !== 'undefined') {
       alert("jQuery is loaded in a javascript file");
   } else {
       alert("jQuery is not loaded in a javascript file");
   }

2. Include the javascript file with the @Javascript` annotation:

   @JavaScript("./src/jquery-test.js")

   

As an alternative to using a CDN, you can import a third- party JavaScript library using npm. Vaadin 14 manages frontend dependencies using npm and webpack. Vaadin 10-13 uses Bower and Webjars for this.

The difference between this and the CDN option is that jQuery is bundled with the other frontend resources of the application, like Vaadin components. This is a good option if you don’t want to rely on a CDN. Using a CDN does, however, allow the browser to cache the used jQuery version and the user is not forced to download it again. It is safe to assume that the jQuery version will not be updated as often as the application’s own frontend bundle.

To make Vaadin download jQuery using npm, add the @NpmPackage annotation to a component.

@NpmPackage(value = "jquery", version = "3.4.1”)

You can find all the libraries and their latest versions on the NPM Registry.

The following example also adds a JavaScript execution that verifies that jQuery library is loaded in the browser.

@Route("")
@NpmPackage(value = "jquery", version = "3.4.1")
@JavaScript("./src/jquery-test.js")
public class MainView extends VerticalLayout {

    public MainView() {
        H1 title = new H1("Test Page");
        add(title);
    }

protected void onAttach(AttachEvent event) {
        super.onAttach(event);
        // executing JS should be avoided in constructor
        getElement().executeJs("if (typeof jQuery !== 'undefined') { \n" +
                "               alert(\"jQuery is loaded globally\");\n" +
                "             } else {\n" +
                "               alert(\"jQuery is not loaded globally\");\n" +
                "             };");
    }
}

When you build or run the application for the first time, the npm package jquery is downloaded into the node_modules folder, but it’s not yet imported into the view.

You can now test whether jQuery is available in the browser using the following JavaScript code:

import jQuery from 'jquery';

if (typeof jQuery !== 'undefined') {
    alert("jQuery is loaded in a javascript file");
} else {
    alert("jQuery is not loaded in a javascript file");
}

jQuery can be called from your JavaScript file, but it is still not available globally (as shown in the image below). It is also not imported into any JavaScript file, and would be excluded from the optimized production frontend bundle.

You can define jquery globally in the JavaScript file.

import jQuery from 'jquery';

window.jQuery = jQuery;
window.$ = jQuery;

if (typeof jQuery !== 'undefined') {
    alert("jQuery is loaded in a javascript file");
} else {
    alert("jQuery is not loaded in a javascript file");
}

The jQuery variable is now set globally.

The third alternative is to use jQuery with a plugin. We use the jTippy plugin, which adds tooltip support for components. We chose jTippy because this library has only one dependency, JQuery. It’s light and easy to use.

First you need to configure webpack to automatically import jQuery so that it can be used in any JavaScript module. This configuration is very specific to jquery.

Update the webpack.config.js file to your project root.

const merge = require('webpack-merge');
const webpack = require('webpack');
const flowDefaults = require('./webpack.generated.js');

module.exports = merge(flowDefaults, {
    // expose jquery's $ for imports
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]
});

The webpack plugin, ProvidePlugin, automatically loads modules instead of having to import or require them everywhere. In this case, it automatically sets 2 variables, $ and jQuery, in all JS modules, making it possible to use jQuery with all components and templates.

Converting a jTippy example to Vaadin

<link rel="stylesheet" href="jTippy-master/jTippy.min.css">
<script src="jTippy-master/jTippy.min.js"></script>

@NpmPackage(value = "jtippy", version = "1.7.2")
@JsModule("./src/tippy-loader.js")
@CssImport("jtippy/jTippy.css")

<a href='#'
    data-toggle="tooltip"
    title="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.">
    There are many variations of...
</a>

Anchor anchor = new Anchor("#");
anchor.setHref("#");
anchor.setText("There are many variations of...");
anchor.setTitle("There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.");
anchor.getElement().setAttribute("data-toggle", "tooltip");
add(anchor);

$(function(){
  $('[data-toggle="tooltip"]').jTippy();
});

import 'jtippy';

$(function(){
    $('[data-toggle="tooltip"]').jTippy();
});

The Vaadin framework comes with default functionality to manage and optimize frontend dependencies, but some libraries like jQuery require a specific configuration of webpack to be used in Vaadin.

Have you tried to import a JavaScript library into a Vaadin 14 project?

Source code on GitHub.