Can we use other plugins or libraries in frappe ui

Frappe Framework
1

Hello,

can we use bootstrap classes, vuetify, vue-session etc. in frappe ui
if yes how?
if no any other solution for connect frappe and vue.

thanks & regards.

2

are you referring to https://frappeui.com/ ?

It’s component library so you’re free to mix and match with other libraries BUT…

  • bootstrap classes are probably a bad idea cause it will conflict with tailwind based code in frappe UI
  • Vuetify is a separate component library, idk if it’s wise to mix them.

@netchampfaris can add more maybe.

3 Likes
3

Vuetify has a very large set of mature components compared to FrappeUI. It would be great if it was possible to use these.

4

Need more clarity on what you want to achieve. There are a couple of ways you can build a “UI” with Frappe.

  1. Custom Page inside Desk (Admin UI): The Admin UI already uses Bootstrap so you are free to use it. You can also use Vue with Vuetify but you can’t disable Bootstrap inside the Admin UI, so if there are CSS clashes, you will have to deal with that.
  2. Custom frontend: All the new product UIs that you see on Frappe Cloud, Gameplan, Insights, etc. are using this method. In this way, you have full liberty how you want to structure your UI code. You can use Vue, React, or any other UI library. You can also use Vuetify, vue-session etc. There is a quick setup documented on Frappe UI website, but you can remove frappe-ui package and use any component library you want. As @ankush has mentioned, it is not wise to mix a TailwindCSS based component library (frappe-ui) and libraries like Vuetify. People have built a lot of custom stuff on Frappe, POS-Awesome is also built on Vuetify.

Frappe gives you a lot of flexibility, but you have to go through the learning curve to understand the moving parts.

3 Likes