{"id":15295046,"url":"https://github.com/webcodebg/vue-common-filters","last_synced_at":"2026-05-02T14:42:41.968Z","repository":{"id":42323698,"uuid":"207299722","full_name":"webcodebg/vue-common-filters","owner":"webcodebg","description":"Collection of common filters used in projects","archived":false,"fork":false,"pushed_at":"2022-07-07T12:04:01.000Z","size":13,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T10:03:49.812Z","etag":null,"topics":["common-filters","date","delimiter","filters","time","vue-filters","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webcodebg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-09T12:05:52.000Z","updated_at":"2019-12-10T16:46:29.000Z","dependencies_parsed_at":"2022-09-17T17:30:57.548Z","dependency_job_id":null,"html_url":"https://github.com/webcodebg/vue-common-filters","commit_stats":null,"previous_names":["epicbg/vue-common-filters"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcodebg%2Fvue-common-filters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcodebg%2Fvue-common-filters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcodebg%2Fvue-common-filters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webcodebg%2Fvue-common-filters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webcodebg","download_url":"https://codeload.github.com/webcodebg/vue-common-filters/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245330907,"owners_count":20597865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["common-filters","date","delimiter","filters","time","vue-filters","vuejs","vuejs2"],"created_at":"2024-09-30T17:08:24.559Z","updated_at":"2026-04-21T16:04:20.646Z","avatar_url":"https://github.com/webcodebg.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-common-filters\nCollection of most used filter  in projects.\n\n# Contribution\nIf you found a bug, want to request a feature or want to contribute, create \u003ca href=\"https://github.com/epicbg/vue-common-filters/issues\"\u003eissue\u003c/a\u003e or submit \u003ca href=\"https://github.com/epicbg/vue-common-filters/pulls\"\u003epull request\u003c/a\u003e\n\n# Installation\n\nInstall via npm\n`npm install vue-common-filters`\n\nDownload repo\n`git clone https://github.com/epicbg/vue-common-filters.git`\n\n\n```javascript\nimport Vue from 'vue'\nimport VueCommonFilters from 'vue-common-filters'\n\n// THESE ARE ALL OPTIONS YOU CAN CUSTOMIZE\n// YOU ARE NOT REQUIRED TO COPY ALL THESE OPTIONS\n// YOU CAN PASS EMPTY OR NO OPTIONS AT ALL\n\nlet config = {\n    \"currency\": {\n        \"symbol\": \"$\",\n        \"decimalDigits\": 2,\n        \"symbolOnLeft\": true,\n        \"spaceBetweenAmountAndSymbol\": false\n    },\n\n    \"text\": {\n        \"truncateClamp\": \"...\"\n    },\n\n    \"numbers\": {\n        \"decimalDigits\": 2\n    },\n\n    \"array\": {\n        \"implodeDelimiter\": \", \"\n    },\n\n    \"dates\": {\n        \"defaultFormat\": \"YYYY-MM-DD HH:mm:ss\",\n        \"filterConvertFormat\": \"DD MMMM YYYY\"\n    }\n}\n\nVue.use(VueCommonFilters, config)\n```\n\n# Usage\n\n## Text filters\n\n### truncate\n\nArguments:\n\n{Number} [length]\n{string} [clamp] - default: '...'\n\nExample:\n\n```javascript\n{{ string | truncate(3) }} // 'hello world' =\u003e 'hel...'\n```\n\n### trim\n\nExample:\n\n```javascript\n{{ string | trim }} // removes spaces from string\n```\n### capitalize\n\nExample:\n\n```javascript\n{{ string | capitalize }} // 'george' =\u003e 'George'\n```\n### uppercase / lowercase\n\nExample:\n\n```javascript\n{{ string | uppercase }} // 'hey' =\u003e 'HEY'\n```\n\n```javascript\n{{ string | lowercase }} // 'HEY' =\u003e 'hey'\n```\n\n### placeholder\n\nExample:\n\n```javascript\n{{ string | placeholder('no data yet') }} // null || false =\u003e 'no data yet'\n```\n\n## Array / object filters\n\n### implode\n\nArguments:\n\n{string} [delimiter] - default: ', ' \n\nExample:\n\n```javascript\n{{ array | implode }} // ['Danny', 'Bobby', 'Mima'] =\u003e Danny, Boby, Mima\n{{ array | implode('and') }} // ['Danny', 'Bobby', 'Mima'] =\u003e Danny and Boby and Mima\n```\n### implodeObjects\n\nArguments:\n\n{string} [key] \n{string} [delimiter] - default: ', ' \n\nExample:\n\n```javascript\n{{ users | implodeObjects('name') }} // [{id: 1, name:'Danny'}, {id: 2, name:'Bobby'}] =\u003e Danny, Bobby\n{{ users | implodeObjects('name', ' and ') }} // [{id: 1, name:'Danny'}, {id: 2, name:'Bobby'}] =\u003e Danny and Bobby\n```\n\n### search\nSearches all fields (inside array of objects) for a match with passed [key]\n\nArguments:\n\n{string} [key]\n\nExample:\n\n```javascript\n{{ users | search('Danny') | implodeObjects('name') }} \n// [{name:'Danny Miller'}, {name:'Danny Grande'}, {name:'Bobby Miller'}]\n//  =\u003e Danny Miller, Bobby Miller \n```\n\n## Date filters\n\nExamples are shown in default `YYYY-MM-DD HH:mm:ss`. If you have different format you can change it from the config as shown in installation section\n\nThis packages uses moment and if you want to change the locale you can do it like so:\n\n```javascript\nmoment.locale('en')\n```\n\n### formatDate\n\nArguments:\n\n{string} [format] - default: DD MMMM YYYY \n\nExample:\n\n```javascript\n{{ date | formatDate('DD MMMM') }} // '2018-02-01' =\u003e '1 February'\n{{ date | formatDate }} // '2018-02-01' =\u003e '1 February 2019'\n```\n\n### fromNow\n\n```javascript\n{{ date | fromNow }} // '2019-02-01' =\u003e '8 months ago'\n```\n\n### from\n\nArguments:\n\n{string} [from] \n\nExample:\n\n```javascript\n{{ date | from('2019-07-02') }} // '2019-07-01' =\u003e '1 year ago'\n```\n\n### to\n\nArguments:\n\n{string} [to] \n\nExample:\n\n```javascript\n{{ date | to('2019-07-01') }} // '2019-06-01' =\u003e 'in 1 month'\n```\n\n### add / subtract\n\nArguments:\n\n{number} [number] \n{string} [type] \n\nExample:\n\n```javascript\n{{ date | add(2, 'days') }} // '2019-06-01' =\u003e '2019-06-03'\n{{ date | subtract(2, 'days') }} // '2019-06-03' =\u003e '2019-06-01'\n```\n\n## Number filters\n\n### decimal\n\nArguments:\n\n{Number} [length] - default: 2\n\nExample:\n\n```javascript\n// '1' =\u003e '1.00'\n// '1.2' =\u003e '1.20'\n{{ coefficient | decimal }} \n```\n\n### currency\n\nArguments:\n\n{string} [symbol] - default: $\n{Number} [decimalDigits] - default: 2\n{Boolean} [symbolOnLeft] - default: true\n{Number} [spaceBetweenAmountAndSymbol] - default: true\n\nExample:\n\n```javascript\n{{ amount | currency }} // 12 =\u003e '$ 12.00'\n{{ amount | currency('EUR', 2, false) }} // 12 =\u003e 12.00 EUR\n```\n\nYou can change the defaults from settings, as shown in installation section\n\n# Programatic Usage\n\n## using functions\n```javascript\nthis.$options.filters.filterName(value)\n```\n```javascript\nthis.$options.filters.currency(10) =\u003e '$ 10.00'\nthis.$options.filters.search([{}, {}..])\n```\n\n## changing settings\n```javascript\nimport vueCommonFilters from 'vue-common-filters'\n\n// Pass options which u want to customize, no need to pass the whole settings object\nvueCommonFilters.config = {\n    currency: {\n        symbol: 'EUR'\n    }\n}\n```\n\n\n# License\nMIT License\n\nCopyright (c) 2019 webcode.bg\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcodebg%2Fvue-common-filters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebcodebg%2Fvue-common-filters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebcodebg%2Fvue-common-filters/lists"}