How to add a node module to a custom app?

[igrekus]

I wanted to fiddle around with Vue GUI frameworks (Vuetify, Quasar and the likes) and successfully added the framework to the app, using CDN-like integration into a new page built with Page DocType as per here:

How to import Vue components?

I’ve tried playing with Vue in Frappe and ran into a problem. How do I import components to extend a new Vue instance for my Page, generated with the Page DocType? I can’t use ES6 imports due to the Page script not being appended as type=module. I’ve implemented imports with with callbacks and frappe.require(), but it feels like a hacky convoluted way and I can’t seem to understand how existing Vue infrastructure, allowing ES6 imports gets wired to the Frappe instance. This is what I’ve got f…

However, when I try to divide Vue+Quasar file into single-file components, buy app begins to fail building:

1. Tried to compile it into my app’s bundle:
   hooks.py

   app_include_js = [
   “assets/js/my_app.min.js”, // ← Quasar is being build into my_app.min.js
   ]

build.json

{
  "js/my_app.min.js": [
    "public/js/export_tool/export_tool.js",
    "public/js/my_app.js",
    "public/node_modules/quasar/dist/quasar.umd.js"
  ]
}

Results in:

SyntaxError: Unexpected token (3278:4) in /home/frappe/frappe-bench/apps/frappe/node_modules/vue/dist/vue.runtime.esm.js

2. Tried to link it directly:

hooks.py

app_include_js = [
	"assets/js/my_app.min.js",   // <- Quasar is being build into my_app.min.js,
	"assets/my_app/node_modules/quasar/dist/quasar.umd.min.js"
]

build.json

{
  "js/my_app.min.js": [
    "public/js/export_tool/export_tool.js",
    "public/js/my_app.js"
  ]
}

Results in:
SyntaxError: Unexpected token (2:8) 1 : { 2 : "name": "quasar",

I suspect this is a problem with the Rollup build configuration, but I fail to see how can I influence it apart from editing my app’s build.json.

Is there a way to fix this using app integration APIs? I really don’t want to edit core files.

[igrekus]

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:

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

[yemikudaisi]

Can you share your build.json’s inclusion for Element-UI. I can’t seem to get it to work.

[igrekus]

Sure, you can find it here: dc_plc/build.json at develop · igrekus/dc_plc · GitHub

[yemikudaisi]

Thanks.

[igrekus]

Sorry I couldn’t answer earlier, hooks.py is here: dc_plc/hooks.py at develop · igrekus/dc_plc · GitHub
I add Element-UI .js here, but I tested the other way, when you compile the .js into your bundle and it’s working just as well.

[Tropicalrambler]

Thanks for sharing your solution.