Installation ​

Create your project ​

Start with a Vue and TypeScript project from Vite. Skip this step if you already have one.

npm create vite@latest my-app -- --template vue-ts
cd my-app

Building the frontend of a Frappe app? Create the project inside your app instead, as the Frappe app guide shows.

Install frappe-ui ​

Install Tailwind CSS v3, frappe-ui and Vue Router. frappe-ui doesn't support Tailwind CSS v4 yet.

npm install -D tailwindcss@^3.4 postcss autoprefixer
npm install frappe-ui vue-router

Configure Tailwind CSS ​

Add the frappe-ui preset to tailwind.config.js, and include frappe-ui's content paths so its classes get generated.

import preset, { content } from 'frappe-ui/tailwind'

/** @type {import('tailwindcss').Config} */
export default {
  presets: [preset],
  content: [...content, './index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
}

Then turn Tailwind on in postcss.config.js.

export default {
  plugins: { tailwindcss: {}, autoprefixer: {} },
}

Import the styles ​

Replace everything in src/style.css with one import. It brings in Tailwind and the Inter font, so don't add the @tailwind lines yourself.

@import 'frappe-ui/style.css';

Add the provider ​

Wrap your app in FrappeUIProvider in src/App.vue. It renders dialogs and toasts opened from code.

<script setup lang="ts">
import { FrappeUIProvider } from 'frappe-ui'
</script>

<template>
  <FrappeUIProvider>
    <RouterView />
  </FrappeUIProvider>
</template>

Then add a router and the styles in src/main.ts. Some components link to routes, so frappe-ui needs Vue Router even in a one-page app.

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './pages/Home.vue'
import './style.css'

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/', component: Home }],
})

createApp(App).use(router).mount('#app')

Configure Vite ​

vite.config.ts depends on where the app runs. Follow the guide that fits:

• Frappe app: adds the frappe-ui Vite plugin, which proxies your bench and builds into the app.
• Standalone app: adds the same plugin with its Frappe server features turned off.

Start using frappe-ui ​

Put a component in src/pages/Home.vue and run npm run dev.

<script setup lang="ts">
import { Button } from 'frappe-ui'
</script>

<template>
  <Button variant="solid" icon-left="lucide-plus" label="New task" />
</template>

You should see a dark button with a plus icon, in the Inter font. If the icon is an empty square, Tailwind isn't reading frappe-ui's files. Check the content line in tailwind.config.js.