Where can I found an example showing how to use a JS library with vaadin?

General
1

I need to use external Javascript libraries in my application I am looking how to do this, but I can’t found examples in the documentation. Can you help me please?

Thanks a lot

Antonio

2

Here is one blog post about the topic https://www.flowingcode.com/2019/01/creating-vaadin-flow-server-side-api.html

3

Hi Tatu,

Thank you a lot for this link. I have a question: Do you know why there are so few examples on the vaadin site for each feature?

Antonio

4

Guillen Antonio:
I have a question: Do you know why there are so few examples on the vaadin site for each feature?

Which topics do you feel like would need more examples? Please be as specific as you can.

5

Hi Olli

For example in the documenation for importing HTML or javascript you write:

@Tag("div")
@JsModule("./src/my-module.js")
@JavaScript("/js/script.js")
@HtmlImport("/html/htmlimport.html")
static class CustomComponent extends Component
        implements HasText {
  // implementation omitted
}

And it’s terrible because for a new user, what to do with the html, and the js. Why you don’t give a full example.

Antonio

6

Hi Antonio,

Thanks for the feedback! I’ve created a ticket to improve the documentation on that particular page: https://github.com/vaadin/flow-and-components-documentation/issues/1113

Do you have any other topics in mind that could use more examples?

Best regards,

Olli

7

Here you can find examples in Vaadin 14 (not official documentation).
Using NpmPackage: https://github.com/jcgueriaud1/vaadin-openlayers-demo (and the forum topic: https://vaadin.com/forum/thread/17987515/integration-opanlayers-6-with-vaadin-14 )

Using CDN: https://github.com/jcgueriaud1/amcharts-demo (and thr forum topic: https://vaadin.com/forum/thread/17949913/vaadin-flow-14-with-amcharts )

If you are using CDN (javascript loaded from url), then it will be probably easier to setup. If you are using NpmPackage, you may have some problems to use the library and to setup the configuration.

Which kind of Javascript libraries do you want to use in your Vaadin application?

8

Thanks a lot Olli, I will had other proposal later.

Hi Jean Christophe,

I have in project to use GoJS and YFiles libraries at least. For the moment I try to implement with GOJS the example using the MindMap: https://gojs.net/latest/samples/mindMap.html

Antonio

9

I’m working on an example for integrating a 3rd party lib to V14. It’s not 100% polished yet, but you can find it here: https://github.com/tmattsso/vaadin-leaflet-example/

Hope it helps :slight_smile:

10

Hi Thomas,
Thanks a lot Thomas.
I start using your example, but I have a pb with the <div…>. May be you can help me here: https://vaadin.com/forum/thread/18118640/problems-using-javascript-and-libraries

Best regards

Antonio