English | 简体中文

VFluent3

VFluent3 is a Vue 3 component library inspired by Microsoft's Fluent Design System. It brings Fluent-style components, icons, shadows, Acrylic-like surfaces, and Reveal interactions into modern Vue applications.

The project is powered by Vite and focuses on making desktop-inspired web interfaces feel clean, responsive, and delightful.

Installation

Install the package with Yarn:

yarn add @creatorsn/vfluent3

npm and pnpm work in a similar way.

Quick Start

Register VFluent3 in your Vue entry file, usually main.js:

import { createApp } from 'vue';
import VueFluent from "@creatorsn/vfluent3";
import '@creatorsn/vfluent3/style.css';
import App from './App.vue';

const app = createApp(App);
app.use(VueFluent);
app.mount('#app');

Then use components in your Vue app:

<template>
  <fv-button>Create something fluent</fv-button>
</template>

Documentation

Read the full documentation and component examples:

https://creator-sn.github.io/VFluent3/

Development

Clone the repository and install dependencies:

yarn

Start the VitePress documentation site:

yarn docs:dev

Create a new component scaffold:

yarn bin:new

Build the library:

yarn build

Contributing

VFluent3 is still growing, and contributions are welcome.

If you have ideas, feedback, bug reports, or design suggestions, please open an issue. If you want to contribute a fix or improvement, please submit a pull request.

For commit messages, this project supports Commitizen:

yarn cz

Fluent Icons

VFluent3 uses Microsoft Fabric UI and Fluent icon resources in several places, including icons and shadows.

Basic icon usage:

<i class="ms-Icon ms-Icon--AADLogo"></i>

When a VFluent3 component supports an icon prop, you can usually pass the icon name directly.

Windows 11 Fluent Icons reference:

https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font

License

VFluent3 is released under the MIT License.

Copyright (c) 2026 Creator SN