MDS Adds Support for Vue 3

February 29, 2024. To stay relevant, a design system needs to keep pace with the users and markets it serves. Today we take a key step in that direction by releasing our new library of MDS Vue 3 chart elements.

Vue 3 is the latest version of our preferred JavaScript framework. Older versions of MDS components were built using Vue 2. The new library matches the design of existing MDS Vue 2 components to make it easy for product teams to upgrade, and ensure that end users will not be impacted by the change.

Note: This post was originally published in October 2023 to announce the release of MDS Vue 3 Components. It was updated in February 2024 to include Chart Elements.

To stay relevant, a design system needs to keep pace with the users and markets it serves.

Accessing Vue 3 Components

When browsing components on the MDS doc site, users can use the framework selector at the top of each component page to choose between Vue 2 and Vue 3 versions. For more information on building with Vue 3 components see Getting Started for Engineers.

What is Vue 3?

Vue.js is a JavaScript framework used by many teams at Morningstar to build frontend experiences. Benefits of Vue 3 include improved performance, better typescript support, and improved reuse of code through composable functions. Upgrading to Vue 3 also ensures ongoing support for developer tools like Nuxt, Vite, and Pinia.

Note: Vue 2 reaches EOL on December 31, 2023. That date is set by Vuejs.org, not the MDS team. After that date, Vue 2 will continue to be available through existing distribution channels, but will no longer receive feature updates, security, or browser compatibility fixes. For further details see the announcement from Vuejs.org.

Will the Design of MDS Components Change?

This is a technology update, not a redesign or product upgrade. The goal is to add support for Vue 3 while minimizing the effort for teams to upgrade. We have made every effort to keep API changes to a minimum, and to match the design of existing components. End users should not see any difference.

The goal is to add support for Vue 3 while minimizing the effort for teams to upgrade.

Will Vue 2 Still Be Supported?

MDS will provide full support for MDS Vue 2 components through September 31, 2024. ​

• MDS support is limited to issues with MDS components. MDS cannot resolve issues with Vue 2 itself. ​
• After September 2024, MDS will limit support for Vue 2 components to critical fixes only. Feature updates may also be considered on a case-by-case basis depending on product need.
• MDS will end all support for Vue 2 components after June 2025. ​

Where Can I Get More Information?

For more background on MDS support for Vue 3, see this blog post where we answer questions about Dart Sass, Vite, the Vue Composition API, and other details.