https://github.com/arturmiz/vuent

🎨 Vue.js components implementing Microsoft Fluent Design
https://github.com/arturmiz/vuent

component-library fluent fluent-design frontend frontend-library library microsoft-fluent uikit uwp uwp-dev vue vue-components vue-plugin vuejs2 vuent

Last synced: 5 days ago
JSON representation

🎨 Vue.js components implementing Microsoft Fluent Design

• Host: GitHub
• URL: https://github.com/arturmiz/vuent
• Owner: arturmiz
• License: mit
• Created: 2018-01-23T23:17:28.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-06T14:22:09.000Z (over 1 year ago)
• Last Synced: 2024-05-01T05:22:49.791Z (9 months ago)
• Topics: component-library, fluent, fluent-design, frontend, frontend-library, library, microsoft-fluent, uikit, uwp, uwp-dev, vue, vue-components, vue-plugin, vuejs2, vuent
• Language: JavaScript
• Homepage: https://vuentjs.org
• Size: 2.69 MB
• Stars: 276
• Watchers: 8
• Forks: 23
• Open Issues: 43
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vuent



  



![master](https://github.com/arturmiz/vuent/workflows/build/badge.svg)

[![Build Status](https://dev.azure.com/vuent/vuent/_apis/build/status/arturmiz.vuent)](https://dev.azure.com/vuent/vuent/_build/latest?definitionId=1)

[![codecov](https://codecov.io/gh/arturmiz/vuent/branch/master/graph/badge.svg)](https://codecov.io/gh/arturmiz/vuent)

[![License](https://img.shields.io/npm/l/vuent.svg)](https://www.npmjs.com/package/vuent)

[![Version](https://img.shields.io/npm/v/vuent.svg)](https://www.npmjs.com/package/vuent)

[![Downloads in total](https://img.shields.io/npm/dt/vuent.svg)](https://www.npmjs.com/package/vuent)

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

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

## How to use

### Quickstart

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

```html

  

  Vuent Demo

  

  

  

  

  


    
{{ message }}


    

  


```

```javascript

// main.js

var app = new Vue({

  el: '#app',

  data: {

    message: 'Hello Vuent!'

  }

});

```

For more details visit the Vuent's website - [https://vuentjs.org][vuent-website].

### npm / Yarn

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

```bash

npm install vuent --save # OR yarn add vuent

```

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

```js

import Vue from 'vue';

import Vuent from 'vuent';

Vue.use(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:

```js

Vue.use(Vuent);

```

## Documentation

Documentation and playground with live examples are available on the Vuent's website - [https://vuentjs.org][vuent-website].

## Changelog

Changes for released versions are documented in [CHANGELOG][changelog-file] file.

## Contributing

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

## License

Vuent is [MIT licensed](https://github.com/arturmiz/vuent/blob/master/LICENSE).

[vue]: https://vuejs.org

[fluent]: https://fluent.microsoft.com/

[fluent-uwp]: https://developer.microsoft.com/en-us/windows/apps/design

[uwp]: https://developer.microsoft.com/en-us/windows/apps

[contributing-file]: https://github.com/arturmiz/vuent/blob/master/.github/CONTRIBUTING.md

[changelog-file]: https://github.com/arturmiz/vuent/blob/master/CHANGELOG.md]

[vuent-website]: https://vuentjs.org