Introducing MDS Components for Vue

July 8, 2020—Built in Vue, with a streamlined visual language and an architecture designed to evolve, MDS components for Vue will change the way product teams consume and contribute to the Design System, while remaining true to the mission that has guided MDS since its first release back in 2017.

Why use MDS Components for Vue?

Velocity

Faster adoption, because MDS components for Vue can coexist with earlier versions. Styles are scoped locally to each component, giving product teams flexibility to upgrade on their own timeline.

Reduced time to market, since MDS now supports continuous delivery. No more waiting for the next MDS release before changes can be consumed by product teams.

Built to evolve, with each component released in its own package. This allows us to introduce strategic improvements to individual components without requiring a library-wide upgrade.

Quality

A brand new data table component built to serve Morningstar. This new component leverages the power of Vue to provide built-in functionality while leaving data and state management in the hands of product teams—a blend of functionality and flexibility we are quite excited about.

Improved UI components, including the long-requested tabs component, a Vue-based layout grid, a new variation of search fields, refactored range sliders, and a whole new take on page shells that will get you up, running and responsive in a flash. We also removed dependencies on external libraries for simplified integration and leaner code.

Accessibility built in to forms and other components, including keyboard navigation and screen reader support. These changes ensure that anyone can use Morningstar products, providing a better experience for all users.

Cohesion

We're all using Vue, leveraging the great features that made Vue the choice of Morningstar product teams. Aligning on Vue will expedite communication between designers and engineers, reduce the risk of accidental deviations, and make it easier for developers to collaborate and move between teams.

Frequently-Asked Questions

How can I get started with MDS components for Vue?

See getting started for guidelines on using the system. There are separate sections for designers and engineers.

Are there any prerequisites to using MDS components for Vue?

To make the most of MDS—and to align with Morningstar’s shift to Vue more broadly—a basic understanding of Vue is essential. For developers who lack this background, an introductory course in Vue like this course from Udemy is strongly recommended.

How will end users be impacted by the new MDS components?

MDS components for Vue mirror the design of existing MDS V2 components, and derive their formatting from the same MDS constants and underlying styles. As a result, end users should not see obvious differences as teams migrate to the new release. The real benefits to users will come in the form of faster innovation, improved performance, and a more cohesive overall experience.

Will MDS V2 components continue to work as expected?

MDS V2 components will continue to work as before, and will continue to be supported through a transitional period. Product teams are encouraged to gradually adopt MDS components for Vue as they focus on new development. In future we will announce a date to end support for MDS V2.

Can MDS components for Vue coexist with earlier versions?

MDS components for Vue use CSS Modules to scope styles locally to each component, preventing style conflicts even if different teams are reusing different versions of the same component within the same application. Product teams can continue to use MDS versions 1 and 2 while gradually migrating to MDS components for Vue.