Skip to content
🎨 Vue.js components implementing Microsoft Fluent Design
Branch: master
Clone or download
arturmiz feat(dialog): default button support (#56)
* feat(dialog): default button support

* test(dialog): fixed for cases without primary button

* test(dialog): covered default button focus behavior

* docs(dialog): default button examples
Latest commit 0036354 Feb 28, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode chore: line endings consistency to be LF May 8, 2018
__tests__ feat(dialog): default button support (#56) Feb 28, 2019
docs feat(dialog): default button support (#56) Feb 28, 2019
src feat(dialog): default button support (#56) Feb 28, 2019
.babelrc build: babel bumped up to v7 (#31) Sep 19, 2018
.editorconfig chore: line endings consistency to be LF May 8, 2018
.eslintignore build: jest as testing framework Feb 7, 2018
.gitattributes chore: line endings consistency to be LF May 8, 2018
.npmignore ci: appveyor integration May 19, 2018
.npmrc chore: prevent from generating package-lock file as yarn used Jan 5, 2019
.travis.yml chore: release v0.5.0 Jan 29, 2019
commitlint.config.js feat(dialog): initial implementation (#45) Jan 15, 2019
jest.config.json test: general and single component installation covered (#8) Jun 4, 2018
postcss.config.js build: added PostCSS to transform styles (#28) Aug 31, 2018
yarn.lock build: eslint v5 upgrade (#52) Feb 5, 2019



Build Status Build Status codecov License Version Downloads in total

Vuent is a set of reusable UI components for Vue created according to Microsoft Fluent Design, in particular its official variation about building Universal Windows Platform (UWP) applications.

The project aims to help developers build web or UWP apps with Fluent's look'n'feel leveraging Vue as a framework for UI/view layer.

How to use


The following snippets can get you up and running with simple demo containing basic text field:

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8" />

  <title>Vuent Demo</title>

  <link href="" type="text/css" rel="stylesheet" media="screen" />

  <script src="" defer></script>
  <script src="" defer></script>
  <script src="main.js" defer></script>
  <div id="app">
    <p>{{ message }}</p>

    <vnt-input v-model="message" label="Text field"></vnt-input>
// main.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vuent!'

For more details visit the Vuent's website -

npm / Yarn

Go to your project's directory and run in terminal:

npm install vuent --save # OR yarn add vuent

Once Vuent is installed in your project, somewhere in your JavaScript code use it as follows:

import Vue from 'vue';
import Vuent from 'vuent';


Vue CLI 3

If you're using Vue CLI 3 in your project, simply run in terminal:

vue add vuent

Then in your project's main file tell Vue to use Vuent:



Documentation and playground with live examples are available on the Vuent's website -


Changes for released versions are documented in CHANGELOG file.


Any contribution is more than welcome! More details can be found in CONTRIBUTING file.


Vuent is MIT licensed.

You can’t perform that action at this time.