Using lodash in all of vue component template

Question

Can I use lodash _ in all of my vue component?

for example:

I have components organized like below:

App.vue > Parent.vue > Child.vue

I would like all of my component to access _ lodash without defined in every component vm data

===

I am also trying using Mixins. it works. but the result not expected like this _().isEmpty() instead of _.isEmpty()

It's a best practice to include any required modules within the component — Jeff
– Jeff, Commented Jun 8, 2016 at 6:06
Could you be more concise? Where exactly do you want to use underscore? within your templates or just in your methods / component logic? If you want to reduce redundancy it seems okey to me if you append a stateless library like underscore JS to the global namespace. — Jan Wirth
– Jan Wirth, Commented Jun 8, 2016 at 6:14
@FranzSkuffka I want use underscore in both of component template and logic. — antoniputra
– antoniputra, Commented Jun 8, 2016 at 8:01
I don't agree. Very common modules like Lodash should be imported globally, so we do not need to write import lodash everywhere. — Zhang Buzz
– Zhang Buzz, Commented Jan 18, 2018 at 8:47

anthonygore · Accepted Answer · 2018-08-04 07:45:38Z

105

Some of the current answers may work in your scenario, but they have downsides:

Adding to the window object means your Vue project can't be server rendered, because servers don't have access to the window object.
Importing in every file works fine, but it can be a pain if you have to remember to do it in every file.

An alternative approach is to add your library to the Vue prototype. All components inherit from this so they will now all be able to access your library from the this keyword.

import _ from 'lodash';    
Object.defineProperty(Vue.prototype, '$_', { value: _ });

Now lodash is available as an instance method for all components. In a .vue file you can do this without importing anything:

export default {
  created() {
    console.log(this.$_.isEmpty(null));
  }
}

The advantage of using Object.defineProperty rather than a normal property assignment is that you can define a descriptor which allows you to make the property read-only, which it will be by default. This stops consuming components from overwriting it.

This is more thoroughly explained in this blog post (which I wrote).

Note: The downside to this approach is that you get the entire Lodash library, even if you only need one or two functions. If that's a problem, best to use import { reduce, whatever } from "lodash"; at the top of the file requiring it.

edited Aug 4, 2018 at 7:45

answered Apr 22, 2017 at 6:58

anthonygore

4,9875 gold badges34 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DogCoffee Over a year ago

FYI - can write like Vue.prototype.$lodash = lodash

ptk Over a year ago

I've added my solution below using the Webpack ProvidePlugin, which I believe is an even cleaner and simpler way of doing things.

anthonygore Over a year ago

I don't like Vue.prototype.$lodash = lodash as much as it can be overwritten. By default, values added using Object.defineProperty() are immutable.

JohnC Over a year ago

The other more practical downside to this method is that in a non trivial app you will constantly run into issues where the vue instance is not available yet in various hooks and so you are left in the same boat. I think this is best used only for libs you know you will always be accessing from within an area where the Vue instance is instantiated and if it's a general purpose lib used all over then it should go on Window (There are plenty of workarounds for Window access on server side render, it's a non-issue) or be imported individually.

antoniputra Over a year ago

Thanks for the brilliants answer & explanation @anthonygore

pespantelis · Accepted Answer · 2016-06-08 06:10:08Z

33

You could import the lodash into each component:

<script>
  import _ from 'lodash'

  export default {
    methods: {
      test (value) {
        return _.isEmpty(value)
      }
    }
  }
</script>

answered Jun 8, 2016 at 6:10

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

5 Comments

antoniputra Over a year ago

the example of your code is only wrapping isEmpty method. how about the other lodash methods?

pespantelis Over a year ago

This is just an example based on yours. You could replace the isEmpty with any lodash method.

hendra1 Over a year ago

using import is the right way if you using lodash (_) in child component.

Zhang Buzz Over a year ago

I downvote because we have thousands of vue files, and we don't want to repeat type in import lodash everywhere. That's not good practice.

LetMeCodeYou Over a year ago

I installed the lodash globally and did the same. But it's not working for me.

gorodezkiy · Accepted Answer · 2016-08-18 20:34:38Z

26

For inline templates separated from the js module code it should work with:

  Vue.component('some-tag', {
    computed: {
      _() {
        return _;
      }
    }
  });

And then you can use it in template in "native" way - _.isEmpty(value).

answered Aug 18, 2016 at 20:34

gorodezkiy

3,4972 gold badges37 silver badges44 bronze badges

1 Comment

Sudhir N Over a year ago

This results in some strange errors in vue3

butaminas · Accepted Answer · 2018-11-22 16:23:09Z

18

import _ from 'lodash'
Vue.prototype._ = _

Insert these lines in your main.js file and it will work all over your app.

answered Nov 22, 2018 at 16:23

butaminas

87811 silver badges28 bronze badges

1 Comment

LetMeCodeYou Over a year ago

Its not even importing.

Brandon Ferens · Accepted Answer · 2016-10-11 17:02:26Z

12

You could import lodash globally like this

window._ = require('lodash');

Once that has been imported, you will have access to _ from anywhere.

answered Oct 11, 2016 at 17:02

Brandon Ferens

1451 silver badge2 bronze badges

3 Comments

anthonygore Over a year ago

I downvoted because window is undefined when you server render the app.

Zhang Buzz Over a year ago

Also do not forget to add below code into .eslintrc.js file, otherwise ESLint will always whine about _ is undefined. globals: { _: false, },

JohnC Over a year ago

I upvoted and I think this should be seriously considered because 1) in a nontrivial app you run into all manner of issues where the Vue instance isn't available yet but you need the library 2) few people really need to worry about server rendering, that seems like pedantic objection for no reason.

newms87 · Accepted Answer · 2017-08-28 19:03:38Z

12

A simple approach that worked for me:

Vue.set(Vue.prototype, '_', _);

This should allow you to use _ in all component templates and vue instances.

answered Aug 28, 2017 at 19:03

newms87

8341 gold badge10 silver badges23 bronze badges

2 Comments

spetsnaz Over a year ago

this solution just works for one of my projects, not in another one, don't know why... weird.

WebDevNerdStuff Over a year ago

I like this solution because you can use it in just the component, and not the entire site. As some sites I have worked on use both lodash and underscore, so a global solution wouldn't work in this situation.

Hotbrains · Accepted Answer · 2017-03-17 06:15:50Z

5

You can use plugin/mixin like this.

import _ from 'lodash';
exports default {
    install : function(Vue, options){
        Vue.mixin({
            computed : {
                "_" : function(){
                    return _;
                }
            }
        });
    }
}

answered Mar 17, 2017 at 6:15

Hotbrains

511 silver badge1 bronze badge

Comments

ptk · Accepted Answer · 2018-03-31 05:51:19Z

3

Bit late to the party but through my research of finding a way to import lodash and other libraries into all my .vue files, I encountered the webpack ProvidePlugin, which achieves everything the OP requested with almost no fuss. To implement this solution, following this fantastic tutorial.

I would note that in the tutorial, he left import "jquery" in his app.js file, which is not required. The plugin with import it automatically.

answered Mar 31, 2018 at 5:51

ptk

7,76917 gold badges55 silver badges109 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Check out vue-lodash!! It's a new wrapper for using lodash in vue. You can call it using

Vue._.random(20) // for getting random number between 20

this._.random(20) //or other method you want to use

in any of the component file :)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 22, 2017 at 6:22

Ewing

171 silver badge2 bronze badges

2 Comments

anthonygore Over a year ago

This works, but do you really need another module in your project to add something that can be added manually with one line?

Ewing Over a year ago

I think you are making a good point, but it depends on person. Cuz some people might wanna use it often in a big project that contains lots of .vue file, but some might only use it for one .vue component. Just like the idea of having vue-axios. It's not necessary but it's definitely convenient in some cases! :)

Max · Accepted Answer · 2022-02-16 19:21:23Z

1

The proper way is to use provide / inject as such:

import _ from 'lodash';

const app = createApp({
        provide: {
            $_: _,
        }
    });

Then in аnоthег component:

<script>
    export default {
        name: 'аnоthег-component',
        inject: [
            '$_'
        ]
    }
</script>

answered Feb 16, 2022 at 19:21

Max

1,48015 silver badges26 bronze badges

Comments

Leonardo Raele · Accepted Answer · 2020-03-10 16:17:29Z

You can also create a base component and make all of your components extend it.

// base-component
import _ from 'lodash';

export default Vue.extend({
  computed: {
    _() {
      return _;
    },
  },
});

// my-component
import BaseComponent from 'path/to/base-vue';

export default BaseComponent.extend({
  template: '<p>Lodash is available: {{!!_}}</p>'
  methods: {
    doSomehting() {
      // `this._` should be available
    },
  },
});

The pro of this approach is it's not intrusive, so no possible conflict with Vue in the future. Also, you can add even more things to the BaseComponent, like other libraries and external services, and they will be available to all other components.

The con is it's more verbose and you have to remember to inherit from the base component.

Balaji · Accepted Answer · 2021-07-19 05:28:34Z

0

For vue users

Go to main.js

import _ from 'lodash'
Vue.set(Vue.prototype, '$_', _)

For nuxt.js users

create main.js inside plugin folder

plugin/main.js

import _ from 'lodash'
Vue.set(Vue.prototype, '$_', _)

Then add into nuxt.config.js

  plugins: ['~plugins/main.js'],

usage are same in both vue and nuxt js

then use in component

this.$_.map(arra,(x)=>{})

answered Jul 19, 2021 at 5:28

Balaji

11.2k5 gold badges61 silver badges53 bronze badges

Collectives™ on Stack Overflow

Using lodash in all of vue component template

12 Answers 12

5 Comments

5 Comments

1 Comment

1 Comment

3 Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

5 Comments

5 Comments

1 Comment

1 Comment

3 Comments

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related