MDS 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.

Action Plan

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.

Our Migration Strategy

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:

• Avoid a component rewrite beyond what's necessary to support Vue 3 and its ecosystem
• Upgrade our stylesheets to Dart Sass for better performance and long-term stability
• Overhaul our internal tooling to increase stability and longevity of our system
• Support both new and existing users of our system to the best of our abilities

New Vue 3 Packages

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 with @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.

Long Term Support

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.

How will this affect product teams?

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.

Frequently Asked Questions

How can I prepare an existing Vue 2 project for migration?

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:

1. Upgrade to the latest version of Vue 2 (Vue 2.7) which aims to backport some Vue 3 features like the composition API with some caveats.
2. Evaluate the list of breaking changes between Vue 2 and Vue 3 by reading the Vue 3 Migration Guide. You may consider avoiding using things in your application that no longer exist in Vue 3 such as filters and keycode modifiers.

3. 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 may be used in production but is not intended for long-term usage. The MDS Vue 2 components may work in the migration build, but are not fully tested and will not work without the vue 2 polyfills enabled. You can read our migration guidance for more details. Our primary suggestion is to use the new MDS Vue 3 components in a Vue 3 environment whenever possible.

4. Be aware that MDS Vue 3 will use Dart Sass features for styles as LibSass (and thus Node Sass) has reached EOL. This means using Dart Sass is a requirement. You may want to consider upgrading to Dart Sass now. If you are already using Node Sass, the migration should be as simple as swapping the package out for Sass.
5. Consider prioritizing your migration in chunks by evaluating dependencies, complexity, and relevance.

I’m starting a new project. Which version of Vue should I use?

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.

Will MDS Vue 2 components work with Vue 3?

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.

Should I switch to the composition API in my application?

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.

Do I need to switch to the composition API to use MDS Vue 3?

No.

Will the Options API be deprecated?

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.

How does MDS Vue 3 impact Chart Elements?

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.

What is Dart Sass?

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.

Does MDS Vue 2 / 3 support Dart Sass?

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.

What is Vite?

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.

Does MDS Vue 2 / 3 support 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.