Vuejs Library import ReferrenceError - Process is not defined

ERPNext
,
1

Need to add VueJS library in ErpNEXT Page, Through local import

Steps: 1. Create a Page Inside ERPNEXT/CRM/Somepage
2. Install Vuesax & Vuetify library (Yarn add lib)
3. Import in public/js/in Somepage.js

eg. import Vuesax from ‘vuesax’
import ‘vuesax/dist/vuesax.css’ //Vuesax styles
Vue.use(Vuesax)

Problem:

After importing - Vuejs runtime error, process not defined.

on debugging RefferenceError: process is not defined,

line causing issue -

productionTip: process.env.NODE_ENV in vue.runtime.esm.js

From: productionTip: process.env.NODE_ENV

@netchampfaris, @umair, @revant_one

1 Like
2

You cannot import external libraries because of the way frappe builds the JS files. You have to include the library file with app_include_js so the library becomes accessibly through JS global scope.

Basically you’d be setting up Vuesax the CDN approach, only the CDN is provided by you when you add /assets/APP_NAME/node_modules/vuesax/dist/vuesax.min.js to app_include_js

3

If I import that way, components shows not registered.

Also I have to import CSS in the CRM/page.js,
then the whole ERPNEXT UI changes if going to another page without refreshing.
but after refreshing the page ErpNExt goes back to normal css.

4

/assets/APP_NAME/node_modules/vuesax/dist/vuesax.min.js to app_include_js

I understood that one,

But some other libraries like, https://www.npmjs.com/package/@morioh/v-perfect-scrollbar
are working with normal imports.
Eg, import scrollbar;
Vue.use();

How to register the components like < - v-btn- > or < - vs - btn - >
in the vue page from Vuesax if library is imported like you said.

5

I’m not sure about v-perfect-scrollbar. I’ve never used it. But I know Vuex, Vue-Router, ElementUI, Vueitify, BootstrapVue all gave me issues with import. So I just never try that approach anymore.

Regarding registering components, they are automatically registered when vuesax.min.js is loaded.

All you have to do is reference the component in your template. So if you want to make a component that has a button.

<template>
  <vs-button>{{ msg }}</vs-button>
</template>

<script>
export default {
  data() {
     return {
         msg: "Hello World"
     };
  }
};
</script>
6

{{ msg }}

I have no idea, why this error comes up after importing in cdn way,

[Vue warn]: Unknown custom element: *< - vs-btn - >* - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

I installed AwesomePOS, theres no vue warning like above.

7

According to the documentation, the element is not called vs-btn it is called vs-button

8

Sorry typing mistake here, but in project in used the correct one - copied from the documentation.

9

Okay, so I’ve installed vuesax and it seems to be working perfectly.

In the example the app name is vuesax_test, I’ve published the repo to the example GitHub - dj12djdjs/vuesax_test: An example/boilerplate installing and using a Vue component library (Vuesax) in Frappe Framework.

Here are the steps.

  1. Obviously install the library. The docs say yarn add vuesax@next but it didn’t work for me I had to use yarn add vuesax.

  2. Force frappe to load the library
    vuesax_test/hooks.py at fb24ed09513e018e2277419f01cb43d4e025b20c · dj12djdjs/vuesax_test · GitHub

  3. Create example component to be used in the root Vue component.
    vuesax_test/HelloWorld.vue at main · dj12djdjs/vuesax_test · GitHub

  4. Import the component to the root Vue component
    vuesax_test/App.vue at main · dj12djdjs/vuesax_test · GitHub

Note: This line allows vuesax style sheet to only effect DOM elements inside the Vue instance.

  1. Create entry point for the Vue instance to be created vuesax_test/app.js at main · dj12djdjs/vuesax_test · GitHub

  2. Build the app into a single minified JS file.
    vuesax_test/build.json at main · dj12djdjs/vuesax_test · GitHub

  3. Force frappe to load your minified app JS
    vuesax_test/hooks.py at fb24ed09513e018e2277419f01cb43d4e025b20c · dj12djdjs/vuesax_test · GitHub

  4. In your page JS call the function we made global in our app.js to create the Vue instance and mount it to the DOM.
    vuesax_test/vuesax_boilerplate.js at fb24ed09513e018e2277419f01cb43d4e025b20c · dj12djdjs/vuesax_test · GitHub

  5. All done

    image
    image1156×631 31.4 KB

3 Likes
10

You can use these steps to use pretty much any Vue component library. I haven’t run into any that doesn’t work with this approach.

1 Like
11

Awesome @dj12djdjs,

Thanks a Lot, it’s working perfectly now.

A lot cleaner & simpler solution then the POSAwesome.

vuesax-page