/vue2-filters

A collection of standard filters Vue 1.* adapted for use in Vue 2.*

Primary LanguageJavaScript

vue2-filters Build Status

The list of standard filters Vue.js 1.* adapted for use in Vue.js 2.*

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>

CDN jsDelivr Hits

<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>

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.

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'
  ],
  //...
}

Usage

capitalize

  • Example:

    {{ msg | capitalize }} // 'abc' => 'Abc'

uppercase

  • Example:

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

lowercase

  • Example:

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

placeholder

  • Arguments:

    • {String} [placeholder]
  • Example:

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

truncate

  • Arguments:

    • {Number} [length] - default: 15
  • Example:

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

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
  • Example:

    {{ amount | currency }} // 12345 => $12,345.00

    Use a different symbol:

    {{ amount | currency('£') }} // 12345 => £12,345.00

    Use a different number decimal places:

    {{ amount | currency('₽', 0) }} // 12345 => ₽12,345

    Use a different thousands separator:

    {{ amount | currency('$', 0, { thousandsSeparator: '.' }) }} // 12345 => $12.345

    Use a different decimal separator:

    {{ amount | currency('$', 2, { decimalSeparator: ',' }) }} // 12345 => $12,345,00

    Use symbol on right:

    {{ amount | currency('$', 0, { symbolOnLeft: false }) }} // 12345 => 12,345$

    Add space between amound and symbol:

    {{ amount | currency('$', 0, { spaceBetweenAmountAndSymbol: true }) }} // 12345 => $ 12,345

    Use multiple options:

    {{ amount | currency('kr', 2, { symbolOnLeft: false, spaceBetweenAmountAndSymbol: true }) }} // 12345 => 12,345.00 kr

pluralize

  • Arguments:

    • {String} single, [double, triple, ...]
  • Example:

    {{count}} {{count | pluralize('item')}} 
    
    // 1 => '1 item'
    // 2 => '2 items'
    {{date}} {{date | pluralize('st','nd','rd','th')}} 
    
    // 1 => '1st'
    // 2 => '2nd'
    // 3 => '3rd'
    // 4 => '4th'
    // 5 => '5th'

limitBy

  • Arguments:

    • {Array} [items]
    • {Number} [limit]
    • {Number} [offset]
  • Example:

    <!-- only display first 10 items -->
    <div v-for="item in limitBy(items, 10)"></div>
    <!-- display items 5 to 15 -->
    <div v-for="item in limitBy(items, 10, 5)"></div>

filterBy

  • Arguments:

    • {Array} [items]
    • {String} [query]
    • {String} [searchKey]
  • Example:

    <!-- only items that contain the target string "hello" will be displayed -->
    <div v-for="item in filterBy(items, 'hello')">
    <!-- the filter will only search for "Jack" in the name field of each user object -->
    <div v-for="user in filterBy(users, 'Jack', 'name')">
    <!-- the filter will only search for "Bonnie" in the name or age fields of each user object -->
    <div v-for="user in filterBy(users, 'Bonnie', 'name', 'age')">

find

  • Arguments:

    • {Array} [items]
    • {String} [query]
    • {String} [searchKey]
  • Example:

    <!-- only the first item that contains the target string "hello" will be displayed -->
    <div v-for="item in find(items, 'hello')">
    <!-- the filter will only search for "Bonnie" in the name or age fields of each user object and return the first result -->
    <div v-for="user in find(users, 'Bonnie', 'name', 'age')">

orderBy

  • Arguments:

    • {Array} [items]
    • {String} [sortKey]
    • {Number} [order] - default: 1
  • Example:

    Sort users by name:

    <ul>
      <li v-for="user in orderBy(users, 'name')">
        {{ user.name }}
      </li>
    </ul>

    In descending order:

    <ul>
      <li v-for="user in orderBy(users, 'name', -1)">
        {{ user.name }}
      </li>
    </ul>

Contribution

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT