@mrpvi/fluentui-vue

@mrpvi/fluentui-vue

Native Vue 3 components adapted from Microsoft Fluent UI React v9.

This is an independent, unofficial package and is not affiliated with or endorsed by Microsoft.

Features

• Native Vue 3 components with idiomatic props, events, slots, and v-model APIs
• No React runtime and no Fluent Web Components wrapper
• TypeScript declarations, ESM, and CommonJS builds
• Accessible native semantics, keyboard behavior, focus states, and form integration
• SSR and hydration support
• Light and dark themes using Fluent design tokens
• Logical RTL styling, forced-colors support, and reduced-motion handling

Installation

npm install @mrpvi/fluentui-vue

Vue ^3.5.0 is required as a peer dependency.

Import the package stylesheet once in your application entry file. Component imports alone do not load the shared tokens and foundations.

import '@mrpvi/fluentui-vue/style.css';

Quick start

Register all components

import { createApp } from 'vue';
import { FluentVue } from '@mrpvi/fluentui-vue';
import '@mrpvi/fluentui-vue/style.css';
import App from './App.vue';

createApp(App).use(FluentVue).mount('#app');

The plugin globally registers all exported F* components.

Import components individually

<script setup lang="ts">
import { ref } from 'vue';
import { FButton, FField, FInput } from '@mrpvi/fluentui-vue';
import '@mrpvi/fluentui-vue/style.css';

const name = ref('');
</script>

<template>
  <FField label="Name" required>
    <FInput v-model="name" placeholder="Your name" />
  </FField>

  <FButton appearance="primary">Save</FButton>
</template>

Components

Actions and navigation

FButton, FCompoundButton, FToggleButton, FMenuButton, FSplitButton, FLink

Forms and inputs

FField, FLabel, FInput, FTextarea, FCheckbox, FSwitch, FRadio, FRadioGroup, FSelect, FSearchBox, FSlider, FSpinButton, FRating, FRatingItem, FRatingDisplay, FListbox, FOption, FOptionGroup, FDropdown, FCombobox, FTagPicker, FTagPickerControl, FTagPickerInput, FTagPickerButton, FTagPickerList, FTagPickerOption, FTagPickerOptionGroup, FTagPickerGroup

Content and layout

FText, FDivider, FImage, FTable, FTableHeader, FTableHeaderCell, FTableBody, FTableRow, FTableCell, FTableSelectionCell, FTableCellLayout, FTableCellActions, FTableResizeHandle, FDataGrid, FDataGridHeader, FDataGridHeaderCell, FDataGridBody, FDataGridRow, FDataGridCell, FDataGridSelectionCell, FCard, FCardHeader, FCardPreview, FCardFooter, FAccordion, FAccordionItem, FAccordionHeader, FAccordionPanel, FTabList, FTab, FBreadcrumb, FBreadcrumbItem, FBreadcrumbButton, FBreadcrumbDivider, FList, FListItem, FAvatar, FAvatarGroup, FAvatarGroupItem, FAvatarGroupPopover, FPersona, FTag, FTagGroup, FInteractionTag, FInteractionTagPrimary, FInteractionTagSecondary

Toolbars

FToolbar, FToolbarButton, FToolbarToggleButton, FToolbarRadioButton, FToolbarRadioGroup, FToolbarGroup, FToolbarDivider

Hierarchical and responsive layout

FTree, FTreeItem, FTreeItemLayout, FTreeItemPersonaLayout, FFlatTree, FFlatTreeItem, FOverflow, FOverflowItem, FOverflowDivider

Color controls

FColorPicker, FColorArea, FColorSlider, FAlphaSlider, FSwatchPicker, FSwatchPickerRow, FColorSwatch, FImageSwatch, FEmptySwatch

Feedback and status

FBadge, FCounterBadge, FPresenceBadge, FSpinner, FProgressBar, FSkeleton, FSkeletonItem, FAriaLiveAnnouncer, FMessageBar, FMessageBarTitle, FMessageBarBody, FMessageBarActions, FMessageBarGroup, FToaster, FToast, FToastTrigger, FToastTitle, FToastBody, FToastFooter, FInfoLabel, FInfoButton

Overlays

FPortal, FPopover, FPopoverTrigger, FPopoverSurface, FTooltip, FDialog, FDialogTrigger, FDialogSurface, FDialogBody, FDialogTitle, FDialogContent, FDialogActions, FDrawer, FOverlayDrawer, FInlineDrawer, FDrawerHeader, FDrawerHeaderTitle, FDrawerHeaderNavigation, FDrawerBody, FDrawerFooter, FMenu, FMenuTrigger, FMenuPopover, FMenuList, FMenuItem, FMenuItemLink, FMenuItemCheckbox, FMenuItemRadio, FMenuItemSwitch, FMenuDivider, FMenuGroup, FMenuGroupHeader, FMenuSplitGroup

Themes

Light tokens are applied by default. Add .fui-theme-dark to an ancestor to use the included dark theme.

<template>
  <main class="fui-theme-dark">
    <FButton appearance="primary">Dark theme</FButton>
  </main>
</template>

Applications can override the exported --color*, --font*, and related CSS custom properties to define their own themes.

Compatibility and scope

• Requires Vue ^3.5.0
• Supports the selected components listed above; this is not a complete Fluent UI Vue implementation
• Components are native Vue adaptations of reviewed Fluent UI React v9 behavior
• React is neither required nor bundled
• Exact upstream versions, provenance, and intentional differences are documented in UPSTREAM.md

Documentation

• Changelog
• Upstream provenance
• Third-party notices
• Architecture and engineering rules
• Component roadmap
• Source code

Public exports and generated TypeScript declarations provide the detailed component API surface.

Development

npm install
npm run dev
npm run check

Browser tests require local Playwright binaries:

npx playwright install chromium firefox webkit
npm run test:browser
npm run test:visual

See ARCHITECTURE.md for the complete development and quality requirements.

License and attribution

Released under the MIT License.

This project adapts selected components from Microsoft Fluent UI. See THIRD_PARTY_NOTICES.md and UPSTREAM.md for attribution and provenance.