Using global lodash with quasar v15 (Solved)

  • 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:

    // 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 }) => {

    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!

  • Admin

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

    Pick one of these two scenarios:

    1. “I want it globally available in vue files”
    import lodash from 'lodash'
    export default ({ Vue }) => {
      Vue.prototype.$_ = lodash // then use as this.$_
    1. “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.

  • Hi @rstoenescu thank you! i picked the first scenario 🙂

  • 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

  • Admin

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

  • 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 _.

Log in to reply