fluent-design-vue
v0.0.4
Published
vue component library based on fluent2 design system
Downloads
240
Maintainers
sunguangkaiReadme
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, message } from 'fluent-design-vue'
import App from './App'
const app = createApp(App);
app.use(FlButton).mount('#app')
app.config.globalProperties.$message = message
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 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
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
Contributors
License
Fluent Design Vue is open source software licensed as MIT.