Migration Strategies

For any existing Vaadin 8 or 7 application it might be desirable to extend the lifetime of the application and make it possible to add new features using Vaadin platform. There are several migration strategies to consider as the need for migration is always application and business specific.

Use Vaadin Eight - It Is Great!

You can stay with Vaadin 8. We are going to maintain it at least until 2022. That gives you the option to plan your migration longer term, and consider what is the needed lifetime for your application. You should look at the needs of your users and how those needs and the technologies used evolve during that time.

Internet Explorer 11 support is still a critical thing for many applications, and for IE11 Vaadin 8 might offer better performance than Vaadin platform since polyfills are needed with IE 11. During the guaranteed lifetime of Vaadin 8 the usage of IE11 should decrease significantly from what it is now.

During the remaining years of Vaadin 8 support, the quarterly Vaadin platform releases will bring more and more features that you can start using when you eventually decide to migrate to it or start building a new application with a fresh design.

Using the Multiplatform Runtime for running V8 Application inside Vaadin platform

We released a Multiplatform Runtime that makes it possible to run views and components from your Vaadin 7 and 8 application inside Vaadin platform. This helps you migrate it to Vaadin platform bit by bit, or just incrementally add Vaadin platform features while also including existing application features as-is.

Using the runtime, you are able to get your V7 or V8 App running in Vaadin platform after couple of quick steps. Then you can migrate the necessary parts while having a working application after each step.

Multiplatform Runtime is now part of Vaadin platform.

Transform an Existing Application to Vaadin platform

Transforming a Vaadin 8 app to Vaadin platform by reusing backend interaction, business logic, and as much as possible of UI logic, but updating the UI to use brand new components. When planning this migration, you should at a minimum read through all of this documentation to understand the differences and verify what features are available and what you need to redesign. One big benefit is that the Data APIs, Binder and DataProvider, work the same way in Vaadin platform, so you won’t have to rework your backend integration.

Fresh Start by Redesigning Application for Vaadin platform

Sometimes the best approach is to make a fresh start - this way you will be able to focus on using new Vaadin platform features to deliver value to your users, instead of carrying over legacy code. As mentioned in previous topics, there is still probably some opportunities to reuse existing solutions related to integration to your business logic and backend.

Migration Assessment Service

To help you understand what a migration to Vaadin platform means to you, Vaadin offers an assessment service led by Vaadin experts. During the assessment, our experts will gain an understanding of your organization’s objectives and concerns, and analyze your application code. Read more about the service.

You can also get us to do the migration for you.

Are you planning on migrating your application? Get help from Vaadin experts.

Open in a
new tab
export class RenderBanner extends HTMLElement {
  connectedCallback() {

  renderBanner() {
    let bannerWrapper = document.getElementById('tocBanner');

    if (bannerWrapper) {

    let tocEl = document.getElementById('toc');

    // Add an empty ToC div in case page doesn't have one.
    if (!tocEl) {
      const pageTitle = document.querySelector(
        'main > article > header[class^=PageHeader-module--pageHeader]'
      tocEl = document.createElement('div');

      pageTitle?.insertAdjacentElement('afterend', tocEl);

    // Prepare banner container
    bannerWrapper = document.createElement('div');
    bannerWrapper.id = 'tocBanner';

    // Banner elements
    const text = document.querySelector('.toc-banner-source-text')?.innerHTML;
    const link = document.querySelector('.toc-banner-source-link')?.textContent;

    const bannerHtml = `<div class='toc-banner'>
          <a href='${link}'>
            <div class="toc-banner--img"></div>
            <div class='toc-banner--content'>${text}</div>

    bannerWrapper.innerHTML = bannerHtml;

    // Add banner image
    const imgSource = document.querySelector('.toc-banner-source .image');
    const imgTarget = bannerWrapper.querySelector('.toc-banner--img');

    if (imgSource && imgTarget) {