Using Vaadin Components

The Vaadin platform includes a set of components, with server-side Java APIs, that you can use to build your UI.

The components, together with Flow, are included as platform dependencies.

Tip
Watch the Vaadin 14: Introduction free training video to learn more about the Vaadin platform terminology and what Vaadin components are.

The vaadin-core module includes all open-source components, such as TextField, Button and Grid. The vaadin module extends this set to include all officially-supported components in the Vaadin platform, like Vaadin Charts.

Vaadin Platform Dependency

The components are part of the Vaadin platform and are included as dependencies, together with Flow. Each component has a Java API.

Using the platform dependency (com.vaadin:vaadin) ensures that all available components, both open source and commercial, are included automatically. You are guaranteed to get compatible versions of both Flow and the components.

Example: Declaring the vaadin.platform dependency.

XML

  1. <dependencies>
  2. <!-- other dependencies -->
  3. <!-- component dependency -->
  4. <dependency>
  5. <groupId>com.vaadin</groupId>
  6. <artifactId>vaadin</artifactId>
  7. <version>${vaadin.platform.version}</version>
  8. </dependency>
  9. </dependencies>
Note
It is possible to include components individually by declaring a dependency for each component. See below for an example.

The platform also includes themes for the components that you can customize to ensure the styling suits your needs. See Styling and Themes for more information.

You can find additional prebuilt Web Components (with Java APIs) contributed by the Vaadin community in the Vaadin Directory.

Individual Component Dependencies

As an alternative to using the platform dependency, you can declare single components as dependencies.

You should add both the Vaadin bom and the relevant Flow component package, for example vaadin-button-flow, to your project dependencies. The Vaadin bom fixes all vaadin-related dependencies to a tested combination, so that the individual components can be added safely. Without the BOM, some https://www.webjars.org/ generated dependencies may change in the future, because of new releases, or because of their use of version ranges.

Example: Adding the Button component in your pom.xml using Maven.

XML

  1. <dependencyManagement>
  2. <dependencies>
  3. <dependency>
  4. <groupId>com.vaadin</groupId>
  5. <artifactId>vaadin-bom</artifactId>
  6. <version>
  7. ${vaadin.platform.version}
  8. </version>
  9. <type>pom</type>
  10. <scope>import</scope>
  11. </dependency>
  12. </dependencies>
  13. </dependencyManagement>
  14. <dependencies>
  15. <!-- other dependencies -->
  16. <!-- component dependency -->
  17. <dependency>
  18. <groupId>com.vaadin</groupId>
  19. <artifactId>vaadin-button-flow</artifactId>
  20. </dependency>
  21. </dependencies>