Skip to content

yaxingson/fluent-design-vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A Vue.js 3 UI library based on Fluent2 Design System.

Get Started

Install

Use package manager:

# npm
$ npm install fluent-design-vue --save

# pnpm
$ pnpm add fluent-design-vue

Import in browser:

<head>
  <link rel="stylesheet" href="//unpkg.com/fluent-design-vue/dist/index.css" />
  <script src="//unpkg.com/vue@3"></script>
  <script src="//unpkg.com/fluent-design-vue"></script>
</head>

Usage

Global import:

// main.ts
import { createApp } from 'vue'
import FluentDesignVue from 'fluent-design-vue'
import App from './App.vue'

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

const app = createApp(App)

app.use(FluentDesignVue)
app.mount('#app')

Global partial import:

// main.ts
import { createApp } from 'vue'
import { FlButton } from 'fluent-design-vue'
import App from './App'

const app = createApp(App);

app.use(FlButton).mount('#app')

Auto import:

$ npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import FluentDesignVueResolver from 'fluent-design-vue/auto-import-resolver'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      imports:[
        {
          'fluent-design-vue':[
            'useToast',
            'useDialog',

          ]
        }
      ],
      resolvers: [FluentDesignVueResolver()],
    }),
    Components({
      resolvers: [FluentDesignVueResolver()],
    }),
  ]
})

Manually import:

$ npm i -D  unplugin-fluent-design-vue
<template>
  <fl-button>I am flButton</fl-button>
</template>
<script>
  import { flButton } from 'fluent-design-vue'
  export default {
    components: { flButton },
  }
</script>
// vite.config.ts
import { defineConfig } from 'vite'
import FluentDesignVue from 'unplugin-fluent-design-vue/vite'

export default defineConfig({
  // ...
  plugins: [FluentDesignVue()],
})

Configuration

Global import:

import { createApp } from 'vue'
import FluentDesignVue from 'fluent-design-vue'
import App from './App.vue'

const app = createApp(App)
app.use(FluentDesignVue, { size: 'small', zIndex: 3000 })

On-demand:

<template>
  <fl-config-provider :size="size" :z-index="zIndex">
    <app />
  </fl-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { FlConfigProvider } from 'fluent-design-vue'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

Compatibility

Links

License

Fluent Design Vue is open source software licensed as MIT.

About

Vue component library based on fluent2 design system

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published