Frappe UI provides a set of components and utilities for rapid UI development. Components are built using Vue 3 and Tailwind. Along with components, there are directives and utilities that make UI development easier.
npm install frappe-ui
# or
yarn add frappe-uiNow, import the FrappeUI plugin and components in your Vue app's main.js:
import { createApp } from 'vue'
import { FrappeUI } from 'frappe-ui'
import App from './App.vue'
import './index.css'
let app = createApp(App)
app.use(FrappeUI)
app.mount('#app')In your tailwind.config.js file, include the frappe-ui preset:
module.exports = {
presets: [
require('frappe-ui/src/utils/tailwind.config')
],
...
}Now, you can import needed components and start using it:
<template>
<button>Click me</button>
</template>
<script>
import { Button } from 'frappe-ui'
export default {
components: {
Button,
},
}
</script>Frappe UI is being used in a lot of products by Frappe.
MIT