Which npm package to use Fluent UI in Vue.js: @fluentui/web-components or @microsoft/fast-components?

Question

As far as I understand, @fluentui/web-components depends on @microsoft/fast-components:

The @fluentui/web-components library are web components built on top of Microsoft's web component and design system foundation, FAST. The Fluent UI Web Components are built using FAST's @microsoft/fast-foundation and @microsoft/fast-element libraries in a way expresses Microsoft's Fluent design language. The FAST libraries are referred to frequently in the code.

1. Does @fluentui/web-components offer more or better components than @microsoft/fast-components?
2. What's the point of using FAST (installation guide) instead of web-components (they have their own installation guide) in a Vue.js app then?
3. Which one is recommended to use for VueJS-apps?
4. Why is Microsoft wasting my time by offering two similar npm packages to solve the same problem? Both implement Fluent UI.

Answer 1

EisenbergEffect on https://github.com/microsoft/fast/issues/6514#issuecomment-1313923840

We apologize for the confusion. These are actually not two solutions for the same thing. These are two completely different design systems.

FAST enables the creation of multiple design systems, in order to meet the broad needs of the industry. You can use FAST to create Fluent, Material, Lion, etc. with minimal effort. The official Fluent UI Web Components are built on FAST. We also used to support a second "starter" design system known as "fast-components".

If you want a highly configurable starter design system, then you would use @microsoft/fast-components as the base of your own design system. This is now deprecated and will be replaced with custom design system tooling in vNext.

If you want the Fluent UI system specifically, and don't wish to create your own design system, then you would use @fluentui/web-components.