Using global lodash with quasar v15 (Solved)

jeimz173

Hi guys, newbie here i need some help on how to import lodash and use it globally?

I followed the instructions on how to install some package as plugins but I think I’m missing something.

here is my code:

//plugins>lodash.js


// here I import the lodash and use it on Vue

import lodash from 'lodash'
// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
  Vue.use(lodash)
}

but then when i tested out some examples of lodash( like _.chunk(['a', 'b', 'c', 'd'], 2)) to my VUE file ,it says, …error ‘_’ is not defined to my cli

it fails me… please help me thank you!

rstoenescu

lodash is not a vue package, so it makes no sense to Vue.use(lodash).

Pick one of these two scenarios:

“I want it globally available in vue files”

import lodash from 'lodash'

export default ({ Vue }) => {
  Vue.prototype.$_ = lodash // then use as this.$_
}

“I want to globally use it, but not through Vue”
Simply import it in any file (js, vue) and then use the reference to it.

jeimz173

Hi @rstoenescu thank you! i picked the first scenario

hannesl

Hi, I am new to quasar and trying as well to add a javascript (log4javascript) and actually I don’t know where exactly to put the lines @rstoenescu . Tried with App.vue but gives error:

ERROR in ./src/App.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js)
Module build failed:   SyntaxError: /development/proj/frontend.q/src/App.vue: Unexpected token, expected ";" (9:25)
     7 | 
     8 | import log4javascript from 'log4javascript'
  >  9 | export default ({ Vue }) {
       |                          ^
    10 |   name: 'App',
    11 |   Vue.prototype.$log = log4javascript // then use as this.$_
    12 | }

Could you pls guide me? Thanks and regards

rstoenescu

@hannesl https://quasar-framework.org/guide/app-plugins.html

hannesl

@rstoenescu ok - thanks I did bring it to work, the term “plugin” was confusing me.

turigeza

I ended up doing this in my plugin file. This makes it globally available.

// import something here
import _ from 'lodash';

// leave the export, even if you don't use it
export default ({ app, router, Vue }) => {
    window._ = _;
};

And then add

 globals: {
    'ga': true, // Google Analytics
    'cordova': true,
    '$axios': true,
    '_': true,
    '__statics': true
  },

into .eslintrc.js. So the linter doesn’t complain. One has to restart quasar dev to reload the .eslintrc.js file.

After that one can use lodash as usual just by typing _.

No More Posting New Topics!

Using global lodash with quasar v15 (Solved)