vue-filter2

In Vue 1 Filters, there's a list of bultin filters those removed from Vue2. If we want to reuse those filters, just add vue-filter2 into dependencies.

yarn add vue-filter2

• Use all built-in filters from vue-filter2

import Vue from 'vue'
import VueFilters from 'vue-filter2'

Vue.use(VueFilters)

• Select bilt-in filters, seperated by 'space'

import Vue from 'vue'
import VueFilters from 'vue-filter2'

Vue.use(VueFilters, { filters: "lowercase uppercase" })

• Make your custom filter with any transform function

import Vue from 'vue'
import { filter, uppercase } from 'vue-filter2'

Vue.use(filter(uppercase))

• Combine custom filter with lodash functions

yarn add lodash

import Vue from 'vue'
import { filter } from 'vue-filter2'
import { toLower, toUpper } from 'lodash/string'
Vue.use(filter(toLower, toUpper))

<div>{{ 'youR Name'|toUpper }}</div>

Built-in Filters

String

• capitalize
• currency
• lowercase
• placeholder
• pluralize
• trim
• truncate
• uppercase

Array

• filterBy
• findBy
• limitBy
• orderBy

lodash functions

(use custom filter)