Design System - Senior Engineer 🧑💻
How MDS is preparing for Vue 3
April 25, 2023—Back in 2020, MDS announced it would be releasing new components built in the Vue 2 framework. The Vue framework had gained traction across many teams due to its robust built-in features and ease of use. We harnessed the power of Vue and its popularity to deliver shareable, performant code across the organization.
By July 2022, Vue 2's final minor version was released. At the same time, The Vue team announced that Vue 2 support would sunset at the end of 2023. This means that Vue 2 will no longer receive any feature or security updates in 2024.
Following the announcement, we wanted to better understand how teams are developing today. We sent out a survey asking teams about their browser, device, and technology support requirements moving into 2023. A key metric we found was nearly 80% of the survey takers mentioned already using or wanting to use Vue 3 in their product. Reasons for interest in Vue 3 included: Vue 2 end-of-life announcement, Nuxt 3 becoming stable for use, and better TypeScript support.
Vue 3 is now stable and considered the default option for developers creating new applications. It boasts performance improvements, better TypeScript support, a new ecosystem of composables to tackle scaling, and so much more. Along with the core library, many critical tools surrounding Vue such as Nuxt are also defaulting to Vue 3.
Given the growing interest in Vue 3 and inevitable sunset of Vue 2, the MDS team has made MDS Vue 3 a priority this year. We're excited to announce that work is well underway to support Vue 3. We are targeting a beta testing phase by the end of Q2 2023, and will seek out teams to provide feedback as early adopters. We expect to have our Vue 3 components ready for production use later this year.
It's critical that we are able to maintain a healthy and up-to-date ecosystem that teams can rely on. We've made many careful considerations on how to approach our migration to Vue 3 and support both new and existing users. With all this in mind, we started with a few key goals:
In order to best support Vue 3, we will release a new set of components as drop-in replacements for our existing components. This means that teams will need to pull new packages into their product to replace the old Vue 2 ones as they migrate. An example would be replacing a dependency on
@mds/button-vue3 in your application.
The new components are refactored internally with Vue 3, but retain the exact same UX and Visual Design of our existing component library. Our priority is to keep the component APIs as close as possible to their Vue 2 counterparts, allowing for a smooth transition.
We are aiming to release a beta version of our Vue 3 components by the end of Q2 2023. This excludes Chart Elements, which will follow later in the year. During our beta phase, we will enlist teams to begin testing in their Vue 3 environments and provide feedback as needed.
We realize not all teams can migrate to Vue 3 immediately. Once the vue 3 components are ready for production later this year, we will begin a transition period where MDS supports both Vue 2 and Vue 3 flavors of our components. After that period, the Vue 2 components will be deprecated.
We're taking care to answer as many questions about the migration to Vue 3 as possible. Feel free to reach out to us if something is not answered below.
While the MDS team is striving to make the migration from MDS Vue 2 to MDS Vue 3 as easy as possible, there will be some necessary code changes. Before migrating to Vue 3, consider the following preliminary steps:
Evaluate work needed to migrate by importing the official Vue migration build into your application and identify errors and warnings in the console.
The documentation indicates a lot of things work between Vue 2 and Vue 3 with this build, but we've found that's not always the case. Especially where APIs have changed, or you are using old/undocumented parts of the Vue 2 API. Inspect your application closely and assert things are working in a local environment rather than assuming so.
The migration build is not intended for long-term usage. Even with all flags set for Vue 2 support, the MDS Vue 2 components are not expected to fully work within a Vue 3 environment. We will not provide support for any issues in this scenario. Our guidance is to use the new MDS Vue 3 components in a Vue 3 environment.
If your project requires MDS, we suggest starting with the latest version of Vue 2 and avoiding Vue 2 APIs that are not supported in Vue 3 where possible. Once MDS Vue 3 components are available for Beta we will invite teams to begin testing them in Vue 3 environments. We cannot provide support for any teams trying to use MDS Vue 2 components in a Vue 3 application as they are not expected to work properly.
The existing MDS Vue 2 components will not support Vue 3. MDS will release a new set of components built to support Vue 3. The Vue 3 components will have the same look, feel, and features as their Vue 2 counterparts.
Our goal is to make migration easy by keeping the Vue 3 component APIs as close to their Vue 2 counterparts as possible. MDS will support both sets of components in parallel through a transition period to allow teams time to upgrade.
The composition API is available in both Vue 2 (as of Vue 2.7) and Vue 3. The Options API and Composition API can be used together throughout your application, even within the same file. The decision of which to use when is up to you. Read more about choosing the between the two here.
No. Vue 3 fully supports the Options API and the Vue team has no plans to deprecate the options API. This clarification can be found here.
Chart Elements will follow the same migration plan as our UI components. A new set of Vue 3 Chart Elements will be released and their Vue 2 counterparts will be deprecated. A beta phase will occur for Chart Elements soon after the initial beta for our UI components.
Dart Sass is the primary implementation of Sass, an extension language of css. It has replaced the usage of LibSass and LibSass wrappers such as Node Sass as of October 2020. This means that LibSass is now deprecated.
Dart Sass attempts to be as backwards compatible as possible and should be a drop-in replacement if you already use LibSass. However, there will eventually be breaking changes.
As of today, MDS Vue 2 does work with Dart Sass. You will notice warnings in the console from dart-sass but they do not affect the usability of any components.
MDS Vue 3 will take advantage of Dart Sass features not available in LibSass, meaning that teams migrating to MDS Vue 3 will need to also adopt Dart Sass. As of now, Dart Sass should be a drop-in replacement for Lib Sass meaning any existing stylesheets should be valid and work as expected. Depending on your bundler, dependency updates may be necessary.
Vite is a newer build tool which rivals Webpack and is built by the Vue team. Vite works with both MDS Vue 2 as well as MDS Vue 3. For building Vue 2 applications with Vite you will need to use the Vite plugin for Vue 2.
Existing Vue 2 applications may also rely on "vue-cli" which was built around the Webpack ecosystem. Vue cli has been moved to maintenance mode in favor of "create-vue" which is built around Vite.
Yes. MDS has never dictated which build tool you can use with our Vue components and that remains the same with Vue 3. Teams are free to use Webpack, Vite, or any other build tool that supports Vue 3.