💥
vue-filters-collection vuejs-filters.
codesandbox example:vue-filters-collection is a collection of filters that help transform/convert strings in a more convenient way. the following is a list of all the available filters (For now)
-
camelcasToReadable
- Will converts a camelcase string to a readable string JamesMay will be James May -
capitalize
- takes an argument, first capitalizies the first character/s in a string. eg james may will be James May if no argument is passed the whole string will be converted to uppercase e.g james may will be JAMES MAY -
decapitalize
- converts the whole string to small letters. -
htmlEntities
- substitutes " htmlentity with a double quote. -
replaceAll
- finds and replace all occurrences for a single string.
To install
npm install vue-filters-collection
or
yarn add vue-filters-collection
Load the plugin to your project
import Vue from 'vue';
import vueFiltersCollection from 'vue-filters-collection';
Vue.use(vueFiltersCollection);
Examples
<template>
<div id="app">
<div>{{ pCapitalize | capitalize }}</div>
//JAMES MAY
<div>{{ pCapitalize | capitalize("first") }}</div>
//Jame May
<div>{{ pDecapitalize | decapitalize }}</div>
//james may
<div>{{ pEntities | htmlEntities }}</div>
//Hello "james" may
<div>{{ pCamelcase | camelcase }}</div>
//Asta Lavista Baby
<div>
{{ pReplaceAll }} :{{ pReplaceAll | replaceAll("this", "that") }} -
replace all
</div>
//that is not a thattle, that is a cactus
<div v-for="key in entities" :key="key">
<h3>
{{ key }} --------------
<span class="ent">{{ key | htmlEntities }}</span>
</h3>
</div>
{{ pEntities }} :{{ pEntities | htmlEntities }} - htmlEntities
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
pCapitalize: "james may",
pDecapitalize: "JAMES MAY",
pEntities: "Hello "james" may",
pCamelcase: "astaLavistaBaby",
pReplaceAll: "This is not a thistle, THIS is a cactus",
//new html entities
entities: {
quo: "" or "",
excla: "! or !",
hash: "# or #",
dolle: "$ or $",
perc: "% or %",
amp: "& or &",
apo: "' or '",
lpar: "( or (",
rpar: ") or )",
ast: "* or *",
commat: "&@ or @",
space: " or  ",
copy: "© or ©",
pound: "£ or £",
euro: "€ or €",
micro: "µ or µ",
},
};
},
};
</script>
How to use these vuejs filters in your script (code)
doTheBoogie(){
console.log(this.$options.filters.capitalize(this.pCapitalize)); //JAMES MAY
//or
console.log(this.$capitalize("james"));
// ......
}
Note!
- Need to add more html entities See ASCII Characters (Printable).
- Need to add more filters
- Add tests