How to add a node module to a custom app?

Frappe Framework App Development
2

I finally managed to add an node-distributed UI library to Vue, running in my custom app. The solution was simple, Rollup couldn’t find the imported files because the imports I used didn’t have .vue extension =)

The routine:

  • yarn add <libraryname>
  • either add library distribution .js to hooks.py’s app_include_js
  • or add it to your app’s main .js via your apps build.json
  • use normal imports as per library’s docs
  • use full path imports (including the extension) if you import your custom modules, which use the library you need: import ExportWidget from './ExportWidget.vue'

Tested it with Quasar, Vuetify and Element-UI:

image
image827×246 9.16 KB

I found Element-UI the easiest to use with Frappe.

5 Likes