Lodash integration and filters for Vue
Download the project using your favourite package manager.
npm install @codekraft-studio/vue-lodash
Than load the plugin using Vue in your application.
import Vue from 'vue'
import VueLodash from '@codekraft-studio/vue-lodash'
Vue.use(VueLodash)You can customize the plugin installation using the options described below.
The plugin will install lodash globally in your Vue instance Vue._, it will
be accessible from everywhere even inside your templates scope:
<li v-for="n in _.uniq([2, 4, 4, 6, 10, 1, 3, 1, 8, 6])">{{n}}</li>Once you have installed the project and setup correctly you should be able to use almost all of the lodash methods as filters, for example:
<p>{{ description | capitalize }}</p>You can also chain them to obtain more complex results:
<p>{{ description | capitalize | truncate({ length: 30 }) }}</p>All the filters can be used as shown in the official lodash documentation, be sure to skip the first parameter which is the value since is injected from the application.
Type: string
The alias string used during the plugin installation for registering lodash in Vue prototype, default to _.
Type: boolean | array
Dedice when or which filters should be registered globally during plugin installation. By default the plugin will install all the available filters, but you can disable all of them passing false or choose which filters group to add when using an array of strings.
// load all filters
Vue.use(VueLodash, {
filters: true
})
// load only filters in lang group
Vue.use(VueLodash, {
filters: ['lang']
})The filter groups mirror the official documentation groups.
Type: object
Use a custom specific lodash instead of the default version of lodash packed with the lib.
Released with MIT License © codekraft-studio