Loading repository data…
freearhey / repository
A collection of Vue.js filters
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A collection Vue.js filters.
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>
<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 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],
...
}
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],
...
}
Arguments:
{Object} [options] - default: {}Options:
{Boolean} [onlyFirstLetter] - default: falseExample:
{{ msg | capitalize }} // 'abc' => 'Abc'
Capitalize only first letter of sentence:
{{ msg | capitalize({ onlyFirstLetter: true }) }} // 'lorem ipsum dolor' => 'Lorem ipsum dolor'
Example:
{{ msg | uppercase }} // 'abc' => 'ABC'
Example:
{{ msg | lowercase }} // 'ABC' => 'abc'
Arguments:
{String} [placeholder]Example:
{{ msg | placeholder('Text if msg is missing') }} // '' => 'Text if msg is missing'
Arguments:
{Number} [length] - default: 15Example:
{{ msg | truncate(10) }} // 'lorem ipsum dolor' => 'lorem ipsu...'
Arguments:
{Number} [amount] - default: 1Example:
{{ msg | repeat(3) }} // 'a' => 'aaa'
Example:
{{ msg | reverse }} // 'abc' => 'cba'
Arguments:
{String} [string]Example:
{{ msg | wrap('###') }} // 'ipsum' => '###ipsum###'
Arguments:
{String} [format] - default: ''{Object} [options] - default: {}Options:
{String} [thousandsSeparator] - default: ','{String} [decimalSeparator] - default: '.'Examples:
{{ 123456 | number('0,0') }} // => 123,456
Change the number of digits after the decimal point:
{{ 12345.67 | number('0.0000') }} // => 12345.6700
Add a plus or minus sign to the beginning:
{{ 123456 | number('+0') }} // => +123456
{{ 123456 | number('-0') }} // => -123456
Show number in thousand (K) or in millions (M):
{{ 123456 | number('0a') }} // => 123K
{{ 123456 | number('0 a') }} // => 123 K
{{ 123456789 | number('0a') }} // => 123M
Use a different thousands separator:
{{ 1234567 | number('0,0', { thousandsSeparator: ' ' }) }} // => 1 234 567
Use a different decimal separator:
{{ 12345.67 | number('0.00', { decimalSeparator: '|' }) }} // => 12,345|67
Arguments:
{Number} [decimalDigits] - default: 2Examples:
{{ 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:
{{ 2000000000 | bytes(4) }} // => 1.8626 GB
Arguments:
{Number} [decimalDigits] - default: 0{Number} [multiplier] - default: 100{Object} [options] - default: {}Options:
{String} [decimalSeparator] - default: '.'Examples:
{{ 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:
{{ 0.974878234 | percent(3) }} // => 97.488%
Change the multiplier:
{{ 0.974878234 | percent(3, 150) }} // => 146.232%
Use a different decimal separator:
{{ 0.07 | percent(2, 100, { decimalSeparator: '|' }) }} // => 7|00%
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: falseExample:
{{ 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 amount and symbol:
{{ amount | currency('$', 0, { spaceBetweenAmountAndSymbol: true }) }} // 12345 => $ 12,345
Show the plus sign if the value is greater than zero:
{{ amount | currency('$', 0, { showPlusSign: true }) }} // 12345 => +$12,345
Use multiple options:
{{ amount | currency('kr', 2, { symbolOnLeft: false, spaceBetweenAmountAndSymbol: true }) }} // 12345 => 12,345.00 kr
Arguments:
{String|Array} single or Array(single, double, triple, ...){Object} [options] - default: {}Options:
{Boolean} [includeNumber] - default: falseExample:
{{ count }} {{ count | pluralize('item') }}
// 1 => '1 item'
// 2 => '2 items'
Use an array of words:
{{ count }} {{ count | pluralize(['fry', 'fries']) }}
// 1 => '1 fry'
// 2 => '2 fries'
// 3 => '3 fries'
Include number to output:
{{ count | pluralize('test', { includeNumber: true }) }}
// 1 => '1 test'
// 2 => '2 tests'
Arguments:
{Object} [options] - default: {}Options:
{Boolean} [includeNumber] - default: falseExample:
{{ date | ordinal }}
// 1 => 'st'
// 2 => 'nd'
// 3 => 'rd'
// 4 => 'th'
// 5 => 'th'
Include number to output:
{{ date | ordinal({ includeNumber: true }) }}
// 1 => '1st'
// 2 => '2nd'
Arguments:
{Number|Array} [items]{Number} [limit]{Number} [offset]Example:
<!-- only display first 10 items -->
<div v-for="item in limitBy(items, 10)">{{ item }}</div>
<!-- display items 5 to 15 -->
<div v-for="item in limitBy(items, 10, 5)">{{ item }}</div>
<!-- with a Range -->
<div v-for="n in limitBy(10, 4, 2)">{{ n }}</div>
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')">
<!-- filter using a custom function -->
<div v-for="user in filterBy(users, user => user.age > 16 && user.age < 60)">
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')">
Arguments:
{Array} [items]{String} [sortKey]{Number} [order] - default: 1Example:
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>
Sort primitive values:
<ul>
<li v-for="name in orderBy(names, true)">
{{ name }}
</li>
</ul>
If you need to override filter options globally you can do so by passing an object into Vue.use() function as the second argument:
import Vue from 'vue'
import Vue2Filters from 'vue2-filters'
var Vue2FiltersConfig = {
capitalize: {
onlyFirstLetter: false
},
number: {
format: '0',
thousandsSeparator: ',',
decimalSeparator: '.'
},
bytes: {
decimalDigits: 2
},
percent: {
decimalDigits: 2,
multiplier: 100,
decimalSeparator: '.'
},
currency: {
symbol: '$',
decimalDigits: 2,
thousandsSeparator: ',',
decimalSeparator: '.',
symbolOnLeft: true,
spaceBetweenAmountAndSymbol: false,
showPlusSign: false
},
pluralize: {
includeNumber: false
},
ordinal: {
includeNumber: false
}
}
Vue.use(Vue2Filters, Vue2FiltersConfig)
Aside from using filters inside templates you can do this programmatically using default filt
Selected from shared topics, language and repository description—not editorial ratings.
idimetrix /
A collection of Vue.js case filters: `camelCase`, `PascalCase`, `Capital Case`, `Header-Case`, `Title Case`, `path/case`, `snake_case`, `param-case`, `dot.case`, `CONSTANT_CASE`, `lower case`, `lOWER CASE FIRST`, `UPPER CASE`, `Upper case first` and other
46/100 health