https://github.com/Ewocker/vue-lodash
This is a small wrapper for integrating lodash into VueJs
https://github.com/Ewocker/vue-lodash
Last synced: 8 months ago
JSON representation
This is a small wrapper for integrating lodash into VueJs
- Host: GitHub
- URL: https://github.com/Ewocker/vue-lodash
- Owner: Ewocker
- License: mit
- Created: 2017-04-22T03:09:58.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T02:53:25.000Z (almost 3 years ago)
- Last Synced: 2024-04-14T21:46:30.148Z (over 1 year ago)
- Language: JavaScript
- Size: 4.62 MB
- Stars: 105
- Watchers: 5
- Forks: 11
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-lodash - This is a small wrapper for integrating lodash into VueJs ` 📝 a year ago` (Utilities [🔝](#readme))
- awesome-vue-zh - 沃伊旅馆 - 一个简单的包装器,用于整合LuaSuto Vue 2. (公用事业 / 杂)
- awesome-vue - vue-lodash - A simple wrapper for integrating lodash to Vue 2. (Components & Libraries / Utilities)
- awesome-vue - vue-lodash ★38 - A simple wrapper for integrating lodash to Vue 2. (Utilities / Miscellaneous)
- awesome-vue - vue-lodash - A simple wrapper for integrating lodash to Vue 2. (Utilities / Miscellaneous)
README
# vue-lodash
[](https://nodei.co/npm/vue-lodash/)
[](https://snyk.io/test/github/ewocker/vue-lodash)
[](https://raw.githubusercontent.com/ewocker/vue-lodash/master/LICENSE)
> A small wrapper for integrating lodash to Vuejs
(Inspired by [vue-axios](https://github.com/imcvampire/vue-axios) plugin)
## Install
```
npm install --save vue-lodash lodash
```
## Usage
```javascript
import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'
// name is optional
Vue.use(VueLodash, { name: 'custom' , lodash: lodash })
new Vue({
el: '#app',
methods: {
test() {
console.log(this.lodash.random(20))
console.log(this._.random(20))
console.log(this.custom.random(20))
},
}
})
console.log(Vue.lodash.random(20))
console.log(Vue._.random(20))
console.log(Vue.custom.random(20))
```
## Typescript
Using __custom name__ with typescript is currently unsupported without casting.
```typescript
import Vue from 'vue'
import VueLodash from 'vue-lodash'
import lodash from 'lodash'
Vue.use(VueLodash, { name: 'custom', lodash: { map, random } })
new Vue({
el: '#app',
methods: {
testLodash() {
console.log(this.lodash.random(20))
console.log(this._.random(20))
console.log((this as any).custom.random(20))
},
}
})
console.log(Vue.lodash.random(20))
console.log(Vue._.random(20))
console.log((Vue as any).custom.random(20))
```
## Tree shaking with lodash
Only import the packages you need, note that lodash tree shaking has to do import with path to module.
```typescript
import Vue from 'vue'
import VueLodash from 'vue-lodash'
import random from 'lodash/random'
import map from 'lodash/map'
Vue.use(VueLodash, { name: 'custom', lodash: { map, random } })
```