Vue.js components implementing Microsoft Fluent Design

by Vue.js Examples

Vuent

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.

View Documentation

How to use

Quickstart

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

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

  <title>Vuent Demo</title>

  <link href="https://unpkg.com/vuent/dist/vuent.css" type="text/css" rel="stylesheet" media="screen" />
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>

    <vnt-input v-model="message" label="Text field"></vnt-input>

    <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
    <script src="https://unpkg.com/vuent/dist/vuent.umd.js"></script>
    <script src="main.js"></script>
  </div>
</body>
</html>

// main.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vuent!'
  }
});

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.use(Vuent);

GitHub