![logo_vue-fluent_black.png](https://github.com/vensurfer61/vue-fluent/blob/master/docs/img/logo%20vue-fluent%20black.png?raw=true)

# Vue-Fluent

> Fluent Design Components for [Vue.js](https://vuejs.org) based on [Buefy](https://github.com/buefy/buefy) and [bulma-fluent](https://mubaidr.github.io/vue-fluent/), inspired by [Microsoft’s Fluent Design System](https://fluent.microsoft.com).

> [Fluent Design Theme for Bulma](https://github.com/mubaidr/bulma-fluent) is also available.

> [Addons for Bulma](https://github.com/mubaidr/bulma-addons) are also available.

<br/>

<a href="https://patreon.com/mubaidr">
  <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" height="42">
</a>

[![NPM](https://nodei.co/npm/vue-fluent.png?compact=true)](https://nodei.co/npm/vue-fluent/)

![dependencies](https://david-dm.org/mubaidr/vue-fluent.svg)

## [Documentation](https://mubaidr.github.io/vue-fluent/)

Browse the [online documentation here](https://mubaidr.github.io/vue-fluent/).

## Quick install

### NPM

```sh
npm install vue-fluent
```

### Import

```js
import Vue from 'vue'
import VueFluent from 'vue-fluent'

Vue.use(VueFluent)

// Or Import individual components
import Vue from 'vue'
import Field from 'buefy/dist/components/field'
import Input from 'buefy/dist/components/input'
Vue.use(Field)
Vue.use(Input)

import 'vue-fluent/dist/vue-fluent.css'

// You can customize the theme, for details check cutosmize section
// Then import styles

import 'vue-fluent/src/lib/index.scss'
```

## CDN link

[unpkg.com/vue-fluent](https://unpkg.com/vue-fluent/dist/)

## Download from this Repository

[Download Latest Minified CSS](https://raw.githubusercontent.com/mubaidr/vue-fluent/master/dist/)

## Copyright and license

All credits to <a href="//github.com/buefy/buefy#collaborators">Buefy Collaborators</a> for implementing these beautiful components.

Code released under [the MIT license](https://github.com/mubaidr/vue-fluent/blob/master/LICENSE).