vue2-filters

A collection Vue.js filters.

Installation

Direct include

Simply include vue2-filters after Vue and it will install itself automatically:

<script src="vue.js"></script>
<script src="vue2-filters.min.js"></script>

To use one of the predefined methods (such as limitBy, filterBy, find, or orderBy) in your component, you also need to add Vue2Filters.mixin to mixin list:

<script>
  new Vue({
    ...
    mixins: [Vue2Filters.mixin],
    ...
  })
</script>

CDN

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js"></script>

To use one of the predefined methods (such as limitBy, filterBy, find, or orderBy) in your component, you also need to add Vue2Filters.mixin to mixin list:

<script>
  new Vue({
    ...
    mixins: [Vue2Filters.mixin],
    ...
  })
</script>

NPM

npm install vue2-filters

When used with a module system, you must explicitly install the filters via Vue.use():

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

You don't need to do this when using global script tags.
To use one of the predefined methods (such as limitBy, filterBy, find, or orderBy) in your component, you also need to add Vue2Filters.mixin to mixin list:

import Vue2Filters from 'vue2-filters'

export default {
  ...
  mixins: [Vue2Filters.mixin],
  ...
}

Nuxt.js

npm install vue2-filters

When create file plugins/vue2-filters.js:

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

Then, add the file inside the plugins key of nuxt.config.js:

module.exports = {
  //...
  plugins: [
    '~/plugins/vue2-filters'
  ],
  //...
}

To use one of the predefined methods (such as limitBy, filterBy, find, or orderBy) in your component, you also need to add Vue2Filters.mixin to mixin list:

import Vue2Filters from 'vue2-filters'

export default {
  ...
  mixins: [Vue2Filters.mixin],
  ...
}

Available Filters

• capitalize
• uppercase
• lowercase
• placeholder
• truncate
• repeat
• reverse
• wrap
• number
• bytes
• percent
• currency
• pluralize
• ordinal
• limitBy
• filterBy
• find
• orderBy

Usage

capitalize

• Arguments:

{Object} [options] - default: {}

• Options:

{Boolean} [onlyFirstLetter] - default: false

• Example:

```js {{ msg | capitalize }} // 'abc' => 'Abc' ``` Capitalize only first letter of sentence:
```js {{ msg | capitalize({ onlyFirstLetter: true }) }} // 'lorem ipsum dolor' => 'Lorem ipsum dolor' ```

uppercase

• Example:

```js {{ msg | uppercase }} // 'abc' => 'ABC' ```

lowercase

• Example:

```js {{ msg | lowercase }} // 'ABC' => 'abc' ```

placeholder

• Arguments:

{String} [placeholder]

• Example:

```js {{ msg | placeholder('Text if msg is missing') }} // '' => 'Text if msg is missing' ```

truncate

• Arguments:

{Number} [length] - default: 15

• Example:

```js {{ msg | truncate(10) }} // 'lorem ipsum dolor' => 'lorem ipsu...' ```

repeat

• Arguments:

{Number} [amount] - default: 1

• Example:

```js {{ msg | repeat(3) }} // 'a' => 'aaa' ```

reverse

• Example:

```js {{ msg | reverse }} // 'abc' => 'cba' ```

wrap

• Arguments:

{String} [string]

• Example:

```js {{ msg | wrap('###') }} // 'ipsum' => '###ipsum###' ```

number

• Arguments:

{String} [format] - default: '' {Object} [options] - default: {}

• Options:

{String} [thousandsSeparator] - default: ',' {String} [decimalSeparator] - default: '.'

• Examples:

```js {{ 123456 | number('0,0') }} // => 123,456 ```
Change the number of digits after the decimal point:
```js {{ 12345.67 | number('0.0000') }} // => 12345.6700 ```
Add a plus or minus sign to the beginning:
```js {{ 123456 | number('+0') }} // => +123456 {{ 123456 | number('-0') }} // => -123456 ```
Show number in thousand (K) or in millions (M):
```js {{ 123456 | number('0a') }} // => 123K {{ 123456 | number('0 a') }} // => 123 K {{ 123456789 | number('0a') }} // => 123M ```
Use a different thousands separator:
```js {{ 1234567 | number('0,0', { thousandsSeparator: ' ' }) }} // => 1 234 567 ``` Use a different decimal separator:
```js {{ 12345.67 | number('0.00', { decimalSeparator: '|' }) }} // => 12,345|67 ```

bytes

• Arguments:

{Number} [decimalDigits] - default: 2

• Examples:

```js {{ 1 | bytes }} // => 1 byte {{ 20 | bytes }} // => 20 bytes {{ 2000 | bytes }} // => 1.95 kB {{ 2000000 | bytes }} // => 1.91 MB {{ 2000000000 | bytes }} // => 1.86 GB {{ 2000000000000 | bytes }} // => 1.82 TB ```
Change the number of digits after the decimal point:
```js {{ 2000000000 | bytes(4) }} // => 1.8626 GB ```

percent

• Arguments:

{Number} [decimalDigits] - default: 0 {Number} [multiplier] - default: 100 {Object} [options] - default: {}

• Options:

{String} [decimalSeparator] - default: '.'

• Examples:

```js {{ 0.01 | percent }} // => 1% {{ 0.1 | percent }} // => 10% {{ 1 | percent }} // => 100% {{ 100 | percent }} // => 10000% {{ 0.97 | percent }} // => 97% ```
Change the number of digits after the decimal point:
```js {{ 0.974878234 | percent(3) }} // => 97.488% ```
Change the multiplier:
```js {{ 0.974878234 | percent(3, 150) }} // => 146.232% ```
Use a different decimal separator:
```js {{ 0.07 | percent(2, 100, { decimalSeparator: '|' }) }} // => 7|00% ```

currency

• Arguments:

{String} [symbol] - default: '$' {Number} [decimalDigits] - default: 2 {Object} [options] - default: {}

• Options:

{String} [thousandsSeparator] - default: ',' {String} [decimalSeparator] - default: '.' {Boolean} [symbolOnLeft] - default: true {Boolean} [spaceBetweenAmountAndSymbol] - default: false {Boolean} [showPlusSign] - default: false

• Example:

```js {{ amount | currency }} // 12345 => $12,345.00 ``` Use a different symbol:
```js {{ amount | currency('£') }} // 12345 => £12,345.00 ``` Use a different number decimal places:
```js {{ amount | currency('₽', 0) }} // 12345 => ₽12,345 ``` Use a different thousands separator:
```js {{ amount | currency('$', 0, { thousandsSeparator: '.' }) }} // 12345 => $12.345 ``` Use a different decimal separator:
```js {{ amount | currency('$', 2, { decimalSeparator: ',' }) }} // 12345 => $12,345,00 ``` Use symbol on right:
```js {{ amount | currency('$', 0, { symbolOnLeft: false }) }} // 12345 => 12,345$ ``` Add space between amount and symbol:
```js {{ amount | currency('$', 0, { spaceBetweenAmountAndSymbol: true }) }} // 12345 => $ 12,345 ```
Show the plus sign if the value is greater than zero:
```js {{ amount | currency('$', 0, { showPlusSign: true }) }} // 12345 => +$12,345 ``` Use multiple options:
```js {{ amount | currency('kr', 2, { symbolOnLeft: false, spaceBetweenAmountAndSymbol: true }) }} // 12345 => 12,345.00 kr ```

pluralize

• Arguments:

{String|Array} single or Array(single, double, triple, ...) {Object} [options] - default: {}

• Options:

{Boolean} [includeNumber] - default: false

• Example:

```js {{ count }} {{ count | pluralize('item') }}
// 1 => '1 item' // 2 => '2 items' ```
Use an array of words:
```js {{ count }} {{ count | pluralize('fry', 'fries') }}
// 1 => '1 fry' // 2 => '2 fries' // 3 => '3 fries' ```
Include number to output:
```js {{ count | pluralize('test', { includeNumber: true }) }}
// 1 => '1 test' // 2 => '2 tests' ```

ordinal

• Arguments:

{Object} [options] - default: {}

• Options:

{Boolean} [includeNumber] - default: false

• Example:

```js {{ date | ordinal }}
// 1 => 'st' // 2 => 'nd' // 3 => 'rd' // 4 => 'th' // 5 => 'th' ```
Include number to output:
```js {{ date | ordinal({ includeNumber: true }) }}
// 1 => '1st' // 2 => '2nd' ```

limitBy

• Arguments:

{Number|Array} [items] {Number} [limit] {Number} [offset]

• Example:

```html

{{ item }}

{{ item }}

{{ n }}

```

filterBy

• Arguments:

{Array} [items] {String} [query] {String} [searchKey]

• Example:

```html